udraggable拖拽拖放插件

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

41745 440 查看评论 (61)

分享到微信朋友圈

查看演示 website 立即下载

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

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

带节假日设置的日历

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

jQuery hover时实现浮动

以简单的实现hover是的效果,加入了延时误操作处理鼠标快速滑过不会被触发。

悬停

36370 411

css3 tranfm鼠标悬停旋转

jquery加css3实现 tranfm鼠标悬停旋转效果

悬停

32601 426

横向跟随图片文字特效

横向跟随图片动画代码（jQuery）

悬停

32049 434

jQuery图片边框线条动画效果

本案例的主要效果是鼠标悬停在图片上，从其中的两个角分别延伸出两条线类似两条河流交汇的效果

悬停

39194 436

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