udraggable拖拽拖放插件

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

43596 441 查看评论 (61)

分享到微信朋友圈

查看演示 website 立即下载

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

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

带节假日设置的日历

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

jQuery鼠标悬停图文展示效果

网站常用效果，jQuery鼠标悬停图文展示

悬停

18381 261

数十次css3鼠标悬停特效

鼠标移上去，界面显示的多种方式，各种css3动画

悬停

36279 842

60种css3鼠标悬停效果

一款使用的效果，数遍悬停会出现相应图片的简介

悬停

60919 931

jquery鼠标悬停效果插件

用jquery制作的页面内容鼠标悬停效果的插件

悬停

41406 552

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