js drag & drop实现拖拽

JavaScript026

js drag & drop实现拖拽,第1张

1.先在元素上添加属性 <div draggable="true"></div>,定义了这个属性后就可以注册拖动的事件了

2.拖动事件:

开始拖动时dragstart

进行拖动时drag

结束拖动时dragend

3.拖拽区域触发事件:

拖拽元素进入区域时触发dragenter

拖拽元素进入区域后悬停触发dragover

拖拽元素离开区域时触发dragleave

拖拽元素放置时触发drop

实现思路:

①鼠标按下+鼠标移动 → 拖拽

②鼠标松开 → 无拖拽

③鼠标偏移 → 拖拽距离

用JavaScript事件方法表示就是:

① onmousedown + onmousemove → startDrag()

② onmouseup → stopDrag()

drag.js代码:

var params = {

left: 0,

top: 0,

currentX: 0,

currentY: 0,

flag: false

}

//获取相关CSS属性

var getCss = function(o,key){

return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key] 

}

//拖拽的实现

var startDrag = function(bar, target, callback){

if(getCss(target, "left") !== "auto"){

params.left = getCss(target, "left")

}

if(getCss(target, "top") !== "auto"){

params.top = getCss(target, "top")

}

//o是移动对象

bar.onmousedown = function(event){

params.flag = true

if(!event){

event = window.event

//防止IE文字选中

bar.onselectstart = function(){

return false

}  

}

var e = event

params.currentX = e.clientX

params.currentY = e.clientY

}

document.onmouseup = function(){

params.flag = false

if(getCss(target, "left") !== "auto"){

params.left = getCss(target, "left")

}

if(getCss(target, "top") !== "auto"){

params.top = getCss(target, "top")

}

}

document.onmousemove = function(event){

var e = event ? event: window.event

if(params.flag){

var nowX = e.clientX, nowY = e.clientY

var disX = nowX - params.currentX, disY = nowY - params.currentY

target.style.left = parseInt(params.left) + disX + "px"

target.style.top = parseInt(params.top) + disY + "px"

}

if (typeof callback == "function") {

callback(parseInt(params.left) + disX, parseInt(params.top) + disY)

}

}

}

HTML/CSS

<style type="text/css">

#box{position:absolute left:100px top:100px padding:5px background:#f0f3f9 font-size:12px -moz-box-shadow:2px 2px 4px #666666 -webkit-box-shadow:2px 2px 4px #666666}

#main{border:1px solid #a0b3d6 background:white}

#bar{line-height:24px background:#beceeb border-bottom:1px solid #a0b3d6 padding-left:5px cursor:move}

#content{width:420px height:250px padding:10px 5px}

</style>

<div id="box">

    <div id="main">

        <div id="bar">拖拽</div>

        <div id="content">

            内容……

        </div>

    </div>

</div>

JS部分

<script src="drag.js" type="text/javascript"></script>

<script type="text/javascript">

    var oBox = document.getElementById("box")

    var oBar = document.getElementById("bar")

    startDrag(oBar, oBox)

</script>