变换（剪切）可拖动的 div
发布于2022-09-28 09:49 阅读(298) 评论(0) 点赞(7) 收藏(3)
我使用 jquerydraggable使这个 div 在窗口中移动。
当它被拖动时（在这个追逐中，向右）我想像上图一样变形。
非常感谢您！
如果您想了解更多信息，请告诉我。
解决方案
这可能会帮助您：
<script>
$(function() {
var prevX = -1;
$('.movable').draggable({
drag: function(e) {
//console.log(e.pageX);
// dragged left
if(prevX > e.pageX) {
$(this).addClass('cls');
}
else if(prevX < e.pageX) { // dragged right
$(this).removeClass('cls').addClass('cls2');
}
prevX = e.pageX;
},
stop: function () {
$(this).removeClass('cls').removeClass('cls2');
}
});
});
</script>
如果被拖到右边，它就像你的照片，如果被拖到左边，它会变成 175 度。
CSS：
.cls {
-webkit-transform:skewX(5deg);
-moz-transform:skewX(5deg);
-ms-transform:skewX(5deg);
-o-transform:skewX(5deg);
}
.cls2 {
-webkit-transform:skewX(175deg);
-moz-transform:skewX(175deg);
-ms-transform:skewX(175deg);
-o-transform:skewX(175deg);
}
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/428938/2b6b2f0a2342e64b08fc/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力