jQuery实现⿏标拖拽事件1、设置⼀个待拖动的元素，设置样式
<ul>
<li>linux</li>
<li>java</li>
<li>javascript</li>
</ul>
*{
margin:0;
padding:0;
css鼠标点击样式
}
ul{
list-style: none;
background-color: grey;
color:white;
width:65px;
height:70px;
padding:10px;
position: absolute;
}
2、给当前元素绑定⼀个⿏标点下去事件
计算⿏标点击位置和元素离最左上⾓的相对位置，
并给document对象绑定⼀个⿏标移动事件，当⿏标移动时，将该元素带动到⿏标所在位置最后给document对象绑定⼀个⿏标松开事件，解绑⿏标移动事件和⿏标松开事件
js代码如下所⽰：
$('ul').mousedown(function(event){
deltax = event.clientX - $(this).offset().left
deltay = event.clientY - $(this).offset().top
$(document).bind('mousemove',start)
$(document).bind('mouseup',end)
return false
})
function start(event){
x = event.clientX - deltax
y = event.clientY - deltay
$('ul').css({'left':x+'px','top':y+'px'})
return false
}
function end(event){
$(this).unbind('mousemove')
$(this).unbind('mouseup')
}
两个return false为去掉⼀些默认事件，去掉会出现问题

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。