udraggable拖拽拖放插件

所属分类：UI,输入-悬停,拖和放,杂项

41939 440 查看评论 (61)

分享到微信朋友圈

查看演示 website 立即下载

插件描述：极其简单易用的拖拽组件，仅一行代码就可实现元素的拖动。配置简单，包含拖动约束功能，API详细。

//拖动组件
$('#drag1').udraggable();
//约束配置
$(selector).udraggable({opt1: value1, opt2: value2});
//在父元素内移动元素
$('#drag2').udraggable({
    containment: 'parent'
});

带节假日设置的日历

常用的根据高度自动切换效果

很酷的鼠标悬浮动画

很酷的鼠标悬停三维倾斜动画,提供了8种效果

悬停

35229 522

图片添加遮罩

根据鼠标进入的位置插入遮罩

悬停

34795 425

各种鼠标移入效果

悬停

45201 605

鼠标滑过特效

模块变暗，出现遮罩层,12种炫酷的CSS3鼠标滑过图片遮罩层动画特效.

悬停

42248 528

讨论这个项目（61）回答他人问题或分享插件使用方法奖励jQ币评论用户自律公约

Dp 0

2024/3/15 15:33:50

(? ??_??)? 0

2022/11/27 15:53:21

(? ??_??)?1

2022/11/27 16:09:13

网上找了个解决方案，各位感觉可行吗

var touchValue = { x: 5, y: 5, sx: 0, sy: 0, ex: 0, ey: 0 }; //initialize the touch values
   window.addEventListener("touchstart", function () {
       var event = event || window.event;
       touchValue.sx = event.targetTouches[0].pageX;
       touchValue.sy = event.targetTouches[0].pageY;
       touchValue.ex = touchValue.sx;
       touchValue.ey = touchValue.sy;
   });
   window.addEventListener("touchmove", function (event) {
       var event = event || window.event;
       event.preventDefault();
       touchValue.ex = event.targetTouches[0].pageX;
       touchValue.ey = event.targetTouches[0].pageY;
   });
   window.addEventListener("touchend", function (event) {
       var event = event || window.event;
       var changeX = touchValue.ex - touchValue.sx;
       var changeY = touchValue.ey - touchValue.sy;
       //console.log("X:"+changeX+" Y:"+changeY);
       window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
   });
   function getIsTouch() {
       var changeX = touchValue.ex - touchValue.sx;
       var changeY = touchValue.ey - touchValue.sy;
       if (Math.abs(changeX) <= touchValue.x && Math.abs(changeY) <= touchValue.y) {
           return true
       } else return false
   }

$('拖动的元素').on('touchend', function () {
       if(getIsTouch()){
           console.log(1)
       }
   });