解决jQuery UI draggable移动端不能拖拽问题
商松
jquery.ui.touch-punch的引用
直接上代码
jquery.ui.touch-punch的下载链接:https://github.com/furf/jquery-ui-touch-punch
例html+css
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） + 排序（Sortable）</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- jquery.ui.touch-punch的本地资源引用-->
<script src="./jquery.ui.touch-punch.min.js"></script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 10px;
}
li {
margin: 5px;
padding: 5px;
width: 150px;
}
</style>
</head>
<body>
<ul>
<li id="draggable" class="ui-state-highlight">请拖拽我</li>
</ul>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</body>
</html>
<script>
$(function () {
$("#sortable").sortable({
revert: true
});
$("#draggable").draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$("ul, li").disableSelection();
});
var touchValue = { x: 5, y: 5, sx: 0, sy: 0, ex: 0, ey: 0 }; //initialize the touch values
window.addEventListener("touchstart", function () {
console.log("touchstart")
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;
console.log("touchmove")
});
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();
console.log("touchend")
});
</script>
注意点
window.addEventListener的事件监听可能会覆盖其他滑动事件例如 滚动事件
在这种情况下 可单独对需要拖拽的div进行拖拽区域监听
代码如下
<script>
var touchValue = { x: 5, y: 5, sx: 0, sy: 0, ex: 0, ey: 0 };
var timeLineDrag = document.getElementById("time-line");
timeLineDrag.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;
}, { passive: false });
timeLineDrag.addEventListener("touchmove", function (event) {
var event = event || window.event;
event.preventDefault();
touchValue.ex = event.targetTouches[0].pageX;
touchValue.ey = event.targetTouches[0].pageY;
}, { passive: false });
timeLineDrag.addEventListener("touchend", function (event) {
var event = event || window.event;
var changeX = touchValue.ex - touchValue.sx;
var changeY = touchValue.ey - touchValue.sy;
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}, { passive: false });
</script>
类似资料：