我有可拖动的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中做到这一点。请建议
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>如果您需要使用纯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