udraggable拖拽拖放插件

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

40388 437 查看评论 (61)

分享到微信朋友圈

查看演示 website 立即下载

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

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

带节假日设置的日历

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

canvas鼠标追随效果

canvas鼠标追随粒子放射效果

悬停

38728 433

CSS3实现超酷的鼠标悬停效果

悬停

40826 589

常用鼠标经过遮罩层动画效果

常用鼠标经过遮罩层动画效果，点击弹窗动画效果

悬停

33296 381

jQuery鼠标悬停方向感知移入效果

jQuery简单实现鼠标各方为移入代码简单易懂适合初学这阅读

悬停

32994 479

讨论这个项目（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)
       }
   });