JS-JQ-拖拽

Posted 2020-10-16 万里奔腾

拖拽的原理很简单

    1、第一步：需要基本的概念，需要这些事件：

　　　　onmousedown()鼠标按下、

　　　　onmousemove()鼠标移动、

　　　　onmouseup()鼠标抬起、

   2、第二步：你需要了解事件的状态，也就是获取鼠标的位置：

　　window.Event ：代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

　　oEvent.clientX:获取鼠标的横坐标

！！！-  CSS

<style>
　　.div1{width:200px;height:200px;background:rosybrown;position:absolute;}
</style>

 

！！！ - html

<div class="div1"></div>

 

！！！ - javascript

window.onload=function()
{
　　var div1=document.getElementsByClassName(‘div1‘)[0];
　　var l=0;
　　var t=0;
　　div1.onmousedown=function(ev)
　　{
　　　　var oEvent=ev||event;
　　　　var disX=oEvent.clientX-div1.offsetLeft;     
　　　　var disY=oEvent.clientY-div1.offsetTop;

　　　　document.onmousemove=function(ev)
　　　　{
　　　　　　var oEvent=ev||event;
　　　　　　l=oEvent.clientX-disX;
　　　　　　t=oEvent.clientY-disY;
　　　　　　div1.style.left=l+"px";
　　　　　　div1.style.top=t+"px";
　　　　}
　　　　document.onmouseup=function()
　　　　{
　　　　　　document.onmouseup=null;
　　　　　　document.onmousemove=null;
　　　　}
　　}

}

 

！！！ -  JQuery

$(function(){
　　var l=0;
　　var t=0;
　　$(‘.div1‘).mousedown(function(ev){
　　　　var oEvent=ev||event;
　　　　var disX=oEvent.clientX-$(this).offset().left;
　　　　var disY=oEvent.clientY-$(this).offset().top;
　　　　$(document).mousemove(function(ev){
　　　　　　var oEvent=ev||event;
　　　　　　l=oEvent.clientX-disX;
　　　　　　t=oEvent.clientY-disY;
　　　　　　$(‘.div1‘).css(‘left‘,l);
　　　　　　$(‘.div1‘).css(‘top‘,t);
　　　　　　console.log(‘移动‘);
　　　　})
　　　　$(document).mouseup(function(){
　　　　　　$(document).off();
　　　　})
　　})
})*/