Javascript防止父div之外的可拖动div答案

【问题标题】：Javascript Prevent Draggable div outside parent divJavascript防止父div之外的可拖动div
【发布时间】：2020-02-11 06:52:21
【问题描述】：

我有可拖动的 div。我希望使用 javascript 将这个可拖动的 div 限制在父级中。我知道如何使用 jquery UI 可拖动插件来防止可拖动的 div。但我不确定如何使用本机 javascript 限制可拖动。请在下面找到我的代码：

<!DOCTYPE HTML>
<html>
<head>
<style>
.draggabletarget {
  float: left; 
  width: 100px; 
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
</head>
<body>

<div class="parent" style="border:1px solid red;height:600px;width:600px;">

<div class="draggabletarget" ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" id="dragtarget">
  <p >Drag me!</p>
</div>

</div>

<script>
function dragStart(event) {
  event.dataTransfer.setData("Text", event.target.id);
}

function dragging(event) {
  document.getElementById("demo").innerHTML = "The p element is being dragged";
}

function allowDrop(event) {
  event.preventDefault();
}

</script>

</body>
</html>

在这段代码中，我有一个带有父类的 div。我希望类为 draggabletarget 的可拖动 div 不应拖到父 div 之外。我如何在本机 JavaScript 中做到这一点。请推荐

【问题讨论】：

标签： javascript html draggable

【解决方案1】：

function $(el){
                return document.getElementById(el);
            }
            var isDragging = false;
            
            var tzdragg = function(){
                return {
                    move : function(divid,xpos,ypos){
                        var a = $(divid);
                        $(divid).style.left = xpos + 'px';
                        $(divid).style.top = ypos + 'px';
                    },
                    setDragging : function() {
                        isDragging = true;
                    },
                    resetDragging : function() {
                        isDragging = false;
                    },
                    startMoving : function(evt){
                       
                        evt = evt || window.event;
                        var posX = evt.clientX,
                            posY = evt.clientY,
                            a = $('elem'),
                        divTop = a.style.top,
                        divLeft = a.style.left;
                        
                        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;
                       var boun=document.getElementById("parent").offsetWidth-document.getElementById("elem").offsetWidth;
                           
                            if((aX>0)&&(aX<boun)&&(aY>0)&&(aY<boun))
                            tzdragg.move('elem',aX,aY);
                        }
                    },
                    stopMoving : function(){
                        var a = document.createElement('script');
                        document.onmousemove = function(){}
                        
                        if(!isDragging) {
                            console.log('clicked');
                        }
                    },
                }
            }();

#elem
        {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: black;
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            user-select: none;
            cursor: default;
        }

<div style="height:400px; width:400px; border:solid 1px black;position: absolute;top: 0;
left: 0;" id='parent'>
    <div id='elem' onmousedown='tzdragg.resetDragging();tzdragg.startMoving(event);' onmouseup='tzdragg.stopMoving();' onmousemove='tzdragg.setDragging();'
        >
    </div>
    </div>

【讨论】：

当它不拖动滑块 div 时如何添加点击事件？
@FerozSiddiqui 你想要可拖动 div 上的点击事件吗？
是的，但是当div处于拖动状态时它应该不起作用
请看这个jsfiddle.net/Feroz123/q87h9nv3
@FerozSiddiqui 我已经更新了代码。请立即检查

【解决方案2】：

如果您需要使用纯 javascript。

<div id='container'>Drag the box around</div>
<div id='slider'></div>

body {
  background-color : lightgray;
}

#container {
  position : fixed;
  border-radius : 10px;
  background-color : brown;
  border : solid 1px black;
  font : 15px arial,sans-serif;
  text-align : center;
}

#slider {
  position : fixed;
  border-radius : 10px;
  background: black;
}

div {
  cursor : default;
}

document.onselectstart = function(e) {
  e.preventDefault();
  return false;
}
var slider = document.getElementById('slider'),container = document.getElementById('container');
document.mouseState = 'up';
slider.mouseState = 'up';
slider.lastMousePosY = null;
slider.lastMousePosX = null;
slider.proposedNewPosY = parseInt(slider.style.top, 10); //converts '10px' to 10
slider.proposedNewPosX = parseInt(slider.style.left, 10);

slider.style.top = '40px';
slider.style.left = '40px';
slider.style.height = '60px';
slider.style.width = '60px';
container.style.top = '20px';
container.style.left = '20px';
container.style.height = '200px';
container.style.width = '400px';
document.onmousedown = function() {
  document.mouseState = 'down';
};

document.onmouseup = function() {
  document.mouseState = 'up';
  slider.mouseState = 'up';
};
slider.onmousedown = function(e) {
  slider.lastMousePosY = e.pageY; 
  slider.lastMousePosX = e.pageX;
  slider.mouseState = 'down';
  document.mouseState = 'down';
};

slider.onmouseup = function(e) {
  slider.mouseState = 'up';
  document.mouseState = 'up';
};
var getAtInt = function getAtInt(obj, attrib) {
  return parseInt(obj.style[attrib], 10);
};

document.onmousemove = function(e) { 
  if ((document.mouseState === 'down') && (slider.mouseState === 'down')) {
    slider.proposedNewPosY = getAtInt(slider, 'top') + e.pageY - slider.lastMousePosY;
    slider.proposedNewPosX = getAtInt(slider, 'left') + e.pageX - slider.lastMousePosX;

    if (slider.proposedNewPosY < getAtInt(container, 'top')) {
      slider.style.top = container.style.top;
    } else if (slider.proposedNewPosY > getAtInt(container, 'top') + getAtInt(container, 'height') - getAtInt(slider, 'height')) {
      slider.style.top = getAtInt(container, 'top') + getAtInt(container, 'height') - getAtInt(slider, 'height') + 'px';
    } else {
      slider.style.top = slider.proposedNewPosY + 'px';
    }
    if (slider.proposedNewPosX < getAtInt(container, 'left')) {
      slider.style.left = container.style.left;
    } else if (slider.proposedNewPosX > getAtInt(container, 'left') + getAtInt(container, 'width') - getAtInt(slider, 'width')) {
      slider.style.left = getAtInt(container, 'left') + getAtInt(container, 'width') - getAtInt(slider, 'width') + 'px';
    } else {
      slider.style.left = slider.proposedNewPosX + 'px';
    }
    slider.lastMousePosY = e.pageY;
    slider.lastMousePosX = e.pageX;
  }
};

这里正在工作example

【讨论】：

当它不拖动滑块 div 时如何添加点击事件？
嗨@Negi，示例很棒，我尝试对仅垂直移动的项目列表执行相同操作，但它不起作用，您可以查看一下，这是链接：@987654322 @ .谢谢