Javascript 可移动/拖动<；部门>；

这是我的更新和修改的脚本，它的作品完全，除了我想普及它。。。观察****我如何使它不必每次我需要为不同的元素使用可拖动函数时都执行

函数（e）{BOX.Draggable.elemen=e.target | | | e.src元素；elementDraggable（e）；

window.onload = addListeners;

var BOX = function(){
  return{
    Draggable: function(){}
  };
}();

function addListeners(){
  document.getElementById('div').addEventListener('contextmenu', menumove, false);
  **document.getElementById('div').addEventListener('mousedown', function(e){BOX.Draggable.elemen = e.target || e.srcElement; elementDraggable(e);}, false);**
}

function elementDraggable(e){
  var e = e || window.event;
  var div = BOX.Draggable.elemen;
  BOX.Draggable.innerX = e.clientX + window.pageXOffset - div.offsetLeft;
  BOX.Draggable.innerY = e.clientY + window.pageYOffset - div.offsetTop;

  window.addEventListener('mousemove', elementMove, false);
  window.addEventListener('mouseup', function(){
    window.removeEventListener('mousemove', elementMove, false);
    }, true);

  function elementMove(e){
    div.style.position = 'absolute';
    div.style.left = e.clientX + window.pageXOffset - BOX.Draggable.innerX + 'px';
    div.style.top = e.clientY + window.pageYOffset - BOX.Draggable.innerY + 'px';
  }
}

---

jQuery是您的一个选项吗？因为代码已经存在，它使您所做的事情变得非常简单

JavaScript代码

window.onload = addListeners;

function addListeners(){
    document.getElementById('dxy').addEventListener('mousedown', mouseDown, false);
    window.addEventListener('mouseup', mouseUp, false);

}

function mouseUp()
{
    window.removeEventListener('mousemove', divMove, true);
}

function mouseDown(e){
  window.addEventListener('mousemove', divMove, true);
}

function divMove(e){
    var div = document.getElementById('dxy');
  div.style.position = 'absolute';
  div.style.top = e.clientY + 'px';
  div.style.left = e.clientX + 'px';
}​

---

您的移动代码简化为：

div.style.position = "absolute";
div.style.top = e.clientY - (e.clientY - div.offsetTop) + "px";
div.style.left = e.clientX - (e.clientX - div.offsetLeft) + "px";

这里的基础数学-

e.clientX

和

e.clientY

对此处的位置绝对没有影响，因此您只需取

偏移左

，并将其重新指定为

样式。左

，顶部也一样。因此没有任何移动

您需要做的是在

mousedown

发生时保存

clientX

和

clientY

，并在此基础上进行减法

---

哦，您还将事件侦听器设置错误。现在的方式是，让它运行一次

divMove

，返回值（

undefined

）是作为侦听器附加的函数。相反，使用

function（e）{divMove（dxy，e | | window.event）}

这是一个不错的无jQuery脚本来拖动div：

#容器{
位置：绝对位置；
背景颜色：蓝色；
}
#元素{
位置：绝对位置；
背景颜色：绿色；
-webkit用户选择：无；
-moz用户选择：无；
-o-用户选择：无；
-ms用户选择：无；
-khtml用户选择：无；
用户选择：无；
}
var mydragg=函数（）{
返回{
移动：函数（divid、xpos、ypos）{
divid.style.left=xpos+'px'；
divid.style.top=ypos+'px'；
},
startMoving：函数（divid、容器、evt）{
evt=evt | | window.event；
var posX=evt.clientX，
posY=evt.clientY，
divTop=divid.style.top，
divLeft=divid.style.left，
eWi=parseInt（divid.style.width），
eHe=parseInt（divid.style.height），
cWi=parseInt（document.getElementById（container.style.width），
cHe=parseInt（document.getElementById（container.style.height））；
document.getElementById（container.style.cursor='move'；
divTop=divTop.replace（'px'，''）；
divLeft=divLeft.replace（'px'，''）；
var diffX=posX-divLeft，
diffY=posY-divTop；
document.onmousemove=函数（evt）{
evt=evt | | window.event；
var posX=evt.clientX，
posY=evt.clientY，
aX=posX-diffX，
aY=posY-diffY；
如果（aX<0）aX=0；
如果（aY<0）aY=0；
如果（aX+eWi>cWi）aX=cWi-eWi；
如果（aY+eHe>cHe）aY=cHe-eHe；
mydragg.move（divid，aX，aY）；
}
},
停止移动：函数（容器）{
var a=document.createElement（'script'）；
document.getElementById（container.style.cursor='default'；
document.onmousemove=函数（）{}
},
}
}();
第一
第二

对“niente00”代码的附加方法

init:函数（类名）{
var elements=document.getElementsByClassName（className）；
对于（var i=0；i

我稍微修改了代码，将其包装在函数中，并添加了一个功能，您可以仅拖动元素的一部分或其子元素，例如div的标题栏。注意：在本演示中，您只能拖动红色区域以移动蓝色区域

函数makeDragable（dragHandle，dragTarget）{
设dragObj=null；//要移动的对象
设xOffset=0；//用于防止拖动的对象跳转到鼠标位置
设yOffset=0；
document.querySelector（dragHandle）.addEventListener（“mousedown”，startDrag，true）；
document.querySelector（dragHandle）.addEventListener（“touchstart”，startDrag，true）；
/*设置偏移参数并开始侦听鼠标移动*/
功能启动图（e）{
e、 预防默认值（）；
e、 停止传播（）；
dragObj=document.querySelector（dragTarget）；
dragObj.style.position=“绝对”；
设rect=dragObj.getBoundingClientRect（）；
如果（e.type==“鼠标向下”）{
xOffset=e.clientX-rect.left；//clientX和getBoundingClientRect（）都使用在滚动“viewport”时调整的可视区域
yOffset=e.clientY-rect.top；
addEventListener（'mousemove'，dragObject，true）；
}else if（例如，type==“touchstart”）{
xOffset=e.targetTouches[0].clientX-rect.left；
yOffset=e.targetTouches[0].clientY-rect.top；
window.addEventListener（'touchmove'，dragObject，
<!doctype html>
<html>
    <head>
        <style>
            #container {
                position:absolute;
                background-color: blue;
                }
            #elem{
                position: absolute;
                background-color: green;
                -webkit-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                -ms-user-select: none;
                -khtml-user-select: none;     
                user-select: none;
            }
        </style>
        <script>
            var mydragg = function(){
                return {
                    move : function(divid,xpos,ypos){
                        divid.style.left = xpos + 'px';
                        divid.style.top = ypos + 'px';
                    },
                    startMoving : function(divid,container,evt){
                        evt = evt || window.event;
                        var posX = evt.clientX,
                            posY = evt.clientY,
                        divTop = divid.style.top,
                        divLeft = divid.style.left,
                        eWi = parseInt(divid.style.width),
                        eHe = parseInt(divid.style.height),
                        cWi = parseInt(document.getElementById(container).style.width),
                        cHe = parseInt(document.getElementById(container).style.height);
                        document.getElementById(container).style.cursor='move';
                        divTop = divTop.replace('px','');
                        divLeft = divLeft.replace('px','');
                        var diffX = posX - divLeft,
                            diffY = posY - divTop;
                        document.onmousemove = function(evt){
                            evt = evt || window.event;
                            var posX = evt.clientX,
                                posY = evt.clientY,
                                aX = posX - diffX,
                                aY = posY - diffY;
                                if (aX < 0) aX = 0;
                                if (aY < 0) aY = 0;
                                if (aX + eWi > cWi) aX = cWi - eWi;
                                if (aY + eHe > cHe) aY = cHe -eHe;
                            mydragg.move(divid,aX,aY);
                        }
                    },
                    stopMoving : function(container){
                        var a = document.createElement('script');
                        document.getElementById(container).style.cursor='default';
                        document.onmousemove = function(){}
                    },
                }
            }();

        </script>
    </head>
    <body>
        <div id='container' style="width: 600px;height: 400px;top:50px;left:50px;">     
            <div id="elem" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");' style="width: 200px;height: 100px;">
                <div style='width:100%;height:100%;padding:10px'>
                <select id=test>
                    <option value=1>first
                    <option value=2>second
                </select>
                <INPUT TYPE=text value="123">
                </div>
            </div>
        </div>  
    </body>
</html>

init : function(className){
    var elements = document.getElementsByClassName(className);
    for (var i = 0; i < elements.length; i++){
        elements[i].onmousedown = function(){mydragg.startMoving(this,'container',event);};
        elements[i].onmouseup = function(){mydragg.stopMoving('container');};
        }
    }