可在特定 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 内拖动的主要内容,如果未能解决你的问题,请参考以下文章

使用javascript限制在特定div窗口上的html内拖动对象

修复旋转父级内可拖动 div 的鼠标方向

div元素拖动到特定位置时如何触发模态?

如果将div的可拖动范围限定在指定元素内

如何在循环内创建动态 div 添加可拖动()?

jQuery:可在 Resizable Droppable 上拖动:项目在放置后消失