IPAD 拖动例子(也支持鼠标)

最新推荐文章于 2020-11-18 02:17:00 发布

iteye_13401

最新推荐文章于 2020-11-18 02:17:00 发布

阅读量734

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_13401/article/details/82337244

版权

<html>
<head>
<title>iPad Touch Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
<div id="trace"></div>

<div style="width:400px;height:400px; position:absolute ;left:100px; background:red" id="test">
<div οnmοusemοve="flip(event);" style="width:100px;height:100px; background:#fff">Blue</div>

</div>

</body>

</html>

<script language=javascript >

$.fn.draggable = function(action) {

var offset = null;

//touch drag
var start = function(e) {
var orig = e.originalEvent;
var pos = $(this).position();
offset = {
x: orig.changedTouches[0].pageX - pos.left,
y: orig.changedTouches[0].pageY - pos.top
};
};
var move = function(e) {
e.preventDefault();
var orig = e.originalEvent;
$(this).css({
top: orig.changedTouches[0].pageY - offset.y,
left: orig.changedTouches[0].pageX - offset.x
});
};

// mouse drag
o = document.getElementById($(this).attr("id"));
o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;
o.orig_y = parseInt(o.style.top) - document.body.scrollTop;
o.orig_index = o.style.zIndex;

var drag = function(a)
{
this.style.cursor = "move";
var d=document;
if(!a)a=window.event;
var x = a.clientX+d.body.scrollLeft-o.offsetLeft;
var y = a.clientY+d.body.scrollTop-o.offsetTop;

if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

d.onmousemove = function(a)
{
if(!a)a=window.event;
o.style.left = a.clientX+document.body.scrollLeft-x;
o.style.top = a.clientY+document.body.scrollTop-y;
o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;
o.orig_y = parseInt(o.style.top) - document.body.scrollTop;
}

d.onmouseup = function()
{
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove = null;
d.onmouseup = null;
d.ondragstart = null;
d.onselectstart = null;
d.onselect = null;
o.style.cursor = "normal";
o.style.zIndex = o.orig_index;
}
}

if (action == "disabled")
{
this.unbind("touchstart", start);
this.unbind("touchmove", move);
this.unbind("mousedown", drag);
o.style.cursor = "normal";
}
else
{
this.bind("touchstart", start);
this.bind("touchmove", move);
this.bind("mousedown", drag);
}

};

function flip(e)
{
$("body").css("background","blue");
e.stopPropagation();
}

$("#test").draggable();

function trace(msg)
{
$("#trace").append( "<br>" + msg) ;
}

</script>

iteye_13401

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IPAD 拖动例子(也支持鼠标)

iPad Touch Test Blue $.fn.draggable = function(action) { var offset = null; //touch drag var s...
复制链接

扫一扫