可在特定 div 内拖动
Posted
技术标签:
【中文标题】可在特定 div 内拖动【英文标题】:Draggable inside a particular div 【发布时间】:2014-03-01 09:56:42 【问题描述】:我正在开发一个使用可拖动事件的项目。现在的问题是draggable()
事件对我来说效果很好......但是因为我想存储我的位置,所以我使用了以下 javascript。这个也很好用……但问题是它适用于整个屏幕。我只是希望它仅通过使用此代码在特定的parent
div 上运行。那么有可能吗?
function $(el)
return document.getElementById(el);
var tzdragg = function()
return
move : function(divid,xpos,ypos)
var a = $(divid);
$(divid).style.left = xpos + 'px';
$(divid).style.top = ypos + 'px';
,
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;
tzdragg.move('elem',aX,aY);
,
stopMoving : function()
var a = document.createElement('script');
document.onmousemove = function()
,
();
如果可能的话,请帮我解决这个问题...
我也做了 jsfiddle....
Fiddle
【问题讨论】:
【参考方案1】:检查可拖动元素的父div边界值,如果满足条件,允许移动元素。
试试这个代码:
DEMO
var boun=document.getElementById("parent").offsetWidth-document.getElementById("elem").offsetWidth;
if((aX>0)&&(aX<boun)&&(aY>0)&&(aY<boun))
tzdragg.move('elem',aX,aY);
【讨论】:
有时,On Mouseup 元素仍然会持续拖拽 onmouse。那个问题是怎么回事?同样在拖动时,Div 滞后太多。以上是关于可在特定 div 内拖动的主要内容,如果未能解决你的问题,请参考以下文章