jquery ui draggable元素不能“滚动”在滚动div之外 [英] jquery ui draggable elements not 'draggable' outside of scrolling div

问题描述

我有一个div设置高/宽的元素（浮动href标签），滚动设置为overflow：auto 在css中。

这是div的结构：

 < div id =tagFun_div_main> 
< div id =tf_div_tagsReturn> 
<！ - 所有可拖动的元素都在这里，父div scolls  - > 
< / div> 
< div id =tf_div_tagsDrop> 
< div id =tf_dropBox>< / div> 
< / div>< / div> 
  

父div，'tf_div_tagsReturn'和'tf_div_tagsDrop'将最终浮在彼此的旁边。 p>

这里是所有的'draggable'元素都用类名'tag_cell'创建之后运行的jquery，

{pre> $（function（）{
$（。tag_cell）。draggable（{
revert：'invalid'，
scroll： false，
遏制：'#tagFun_div_main'
}）;
$（＃tf_dropBox）。droppable（{
accept：'.tag_cell'，
hoverClass ：'tf_dropBox_hover'，
activeClass：'tf_dropBox_active'，
drop：function（event，ui）{
GLOBAL_ary_tf_tags.push（ui.draggable.html（））;
tagFun_reload （）;
}
}）;
}）;


如上所述，可拖动元素可以在div'tf_div_tagsReturn'中拖动，但它们不可视拖到该父div外面。值得注意的是，如果我拖动一个可拖动的元素，并将鼠标移动到可移动的div上，使用id'tf_dropBox'，那么hoverclass将被触发，我再也看不到draggable元素了。 >

非常感谢您帮助我找到解决方案的任何建议。这是我第一次使用jquery，所以希望我只是缺少一些超级明显的东西。我一直在阅读文档和搜索论坛，目前为止没有优势：（

谢谢你的时间。

更新：

非常感谢Jabes88提供的解决方案，使我能够实现我正在寻找的功能，这里是什么我的jquery最终看起来像是自由的，因为我是新来的jquery。

  $（function（）{ 
 $（。tag_cell）。draggable（{
 revert：'invalid'，
 scroll：false，
 containment：'#tagFun_div_main'，
 helper： 'clone'，
 start：function（）{
 this.style.display =none; 
}，
 stop：function（）{
 this。 style =; 
} 
}）; 
 $（。tf_dropBox）droppable（{
 accept：'.tag_cell'，
 hoverClass ：'tf_dropBox_hover'，
 activeClass：'tf_dropBox_active'，
 drop：function（event，ui）{
 GLOBAL_ary_tf_tags.push（ui.draggable.html（））; 
 tagFun_reload（）; 
} 
}）; 
}）; 
  

---

谢谢Jabes88，你是我的救星！您可以使用可拖动对象允许多个实例吗？

解决方案

然后使用助手和附加选项：

  $（。tag_cell）。draggable（{
 helper： clone'，
 appendTo：'div＃myHelperHolder'
}）; 
  

然后在您的css中，您可以将div＃myHelperHolder的zindex设置为999.
如果没有，请尝试使用zindex选项：

  $（。tag_cell）。draggable（{
 zIndex：999 
}）; 
  

我也会考虑设置addClasses来阻止插件添加所有烦人的类，从而浪费处理器速度。

更新：我有一个新的解决方案

有一点我想出了这一点：滚动选项不会阻止孩子被溢出隐藏。我已经阅读了一些其他的帖子，我找不到一个解决方案。但是我想出了一点点工作，完成了这项工作。

 <！DOCTYPE html PUBLIC  -  // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> 
< html xmlns =http://www.w3.org/1999/xhtml> 
< head> 
< script type =text / javascriptsrc =http://www.google.com/jsapi>< / script> 
< script type =text / javascript> 
 google.load（jquery，1.4.0）; 
 google.load（jqueryui，1.7.2）; 
 google.setOnLoadCallback（OnLoad）; 
函数OnLoad（）{
 var dropped = false; 
 $（。tag_cell）。draggable（{
 addClasses：false，
 revert：'invalid'，
 containment：'#tagFun_div_main'，
 helper： 'clone'，
 appendTo：'#tagFun_div_helper'，
 start：function（event，ui）{
 dropped = false; 
 $（this）.addClass（hide ）; 
}，
 stop：function（event，ui）{
 if（dropped == true）{
 $（this）.remove（）; 
 } else {
 $（this）.removeClass（hide）; 
} 
} 
}）; 
 $（＃tf_dropBox）。droppable（{
 accept：'.tag_cell'，
 hoverClass：'tf_dropBox_hover'，
 activeClass：'tf_dropBox_active'，
 drop：function（event，ui）{
 dropped = true; 
 $ .ui.ddmanager.current.cancelHelperRemoval = true; 
 ui.helper.appendTo（this）; 
 } 
}）; 
} 
< / script> 
< style> 
 div＃tagFun_div_main {display：block;宽度：800像素;高度：400像素;保证金：汽车;填充：10px的;背景：＃F00; } 
 div＃tf_div_tagsReturn {display：block;宽度：200像素;高度：100％;浮动：左;溢出：汽车;背景：＃000; } 
 div＃tf_div_tagsDrop {display：block;宽度：200像素;高度：100％;浮动：权利;背景：＃0F0; } 
 div＃tf_dropBox {display：block;宽度：100％;高度：250像素;背景：＃F0F; } 
 span.tag_cell {display：block;宽度：25像素;高度：25像素;保证金：1px的;浮动：左;光标：指针;背景：＃0FF;的z-index：99; } 
 span.tag_cell.hide {display：none; } 
 div＃tf_dropBox.tf_dropBox_hover {background：#FFF！important; } 
 div＃tf_dropBox.tf_dropBox_active {background：＃333; } 
< / style> 
< / head> 
< body> 
< div id =tagFun_div_main> 
< div id =tf_div_tagsReturn> 
< span class =tag_cell>< / span> 
< span class =tag_cell>< / span> 
< span class =tag_cell>< / span> 
< span class =tag_cell>< / span> 
< span class =tag_cell>< / span> 
< span class =tag_cell>< / span> 
< span class =tag_cell>< / span> 
< span class =tag_cell>< / span> 
< span class =tag_cell>< / span> 
< span class =tag_cell>< / span> 
< span class =tag_cell>< / span> 
< / div> 
< div id =tf_div_tagsDrop> 
< div id =tf_dropBox>< / div> 
< / div> 
< / div> 
< div id =tagFun_div_helper> 
<！ - 这是助手被附加临时使用的地方 - > 
< / div> 
< / body> 
< / html> 
  

我粘贴了我的整个代码，以便您可以尝试。这是一个简短的描述：
当你开始拖动一个项目时，它隐藏原来的，克隆它，然后将克隆附加到溢出区域之外的一个容器。一旦放弃，它将删除原始文件并将克隆移动到放置区域。很好，所以现在我们已经解决了这个溢出问题，但遇到了一些其他问题。将克隆项目放入放置区域时，它将消失。为了阻止这种情况发生，我使用这种方法：

  $。ui.ddmanager.current.cancelHelperRemoval = true; 
  

现在我们已经停止了帮助程序被删除，但它仍然保留在div＃tagFun_div_helper中，而原始可拖动项目已重新出现。

  ui.helper.appendTo（this）; 
  

这将把帮助者从div＃tagFun_div_helper传输到我们的放置区。

  dropped = true; 
  

这将告诉我们的停止功能从组中删除原始项，而不是删除.hide 课。希望有帮助！

i am super stumped.

i have many elements (floating href tags) in a div with a set height/width, with scroll set to "overflow: auto" in the css.

this is the structure of the divs:

<div id="tagFun_div_main">
<div id="tf_div_tagsReturn">
    <!-- all the draggable elements go in here, the parent div scolls -->
</div>
<div id=" tf_div_tagsDrop">
    <div id="tf_dropBox"></div>
</div></div>

the parent div's, 'tf_div_tagsReturn' and 'tf_div_tagsDrop' will ultimately float next to each other.

here is the jquery which is run after all of the 'draggable' elements have been created with class name 'tag_cell', :

$(function() {
    $(".tag_cell").draggable({ 
        revert: 'invalid', 
        scroll: false,
        containment: '#tagFun_div_main'
    });
    $("#tf_dropBox").droppable({
        accept: '.tag_cell',
        hoverClass: 'tf_dropBox_hover',
        activeClass: 'tf_dropBox_active',
        drop: function(event, ui) {
            GLOBAL_ary_tf_tags.push(ui.draggable.html());
            tagFun_reload();
        }
    });
}); 

as i stated above, the draggable elements are draggable within div 'tf_div_tagsReturn', but they do not visually drag outside of that parent div. worthy to note, if i am dragging one of the draggable elements, and move the mouse over the droppable div, with id 'tf_dropBox', then the hoverclass is fired, i just can't see the draggable element any more.

thank you very much for any advice on helping me find a solution. this is my first run at using jquery, so hopefully i am just missing something super obvious. i've been reading the documentation and searching forums thus far to no prevail :(

thank you for your time.

UPDATE:

many thanks to Jabes88 for providing the solution which allowed me to achieve the functionality i was looking for, here is what my jquery ended up looking like, feel free to critique it, as i am new to jquery.

$(function() {
    $(".tag_cell").draggable({ 
        revert: 'invalid', 
        scroll: false,
        containment: '#tagFun_div_main',
        helper: 'clone',
        start : function() {
        this.style.display="none";
        },
        stop: function() {
        this.style.display="";
        }
    });
    $(".tf_dropBox").droppable({
        accept: '.tag_cell',
        hoverClass: 'tf_dropBox_hover',
        activeClass: 'tf_dropBox_active',
        drop: function(event, ui) {
            GLOBAL_ary_tf_tags.push(ui.draggable.html());
            tagFun_reload();
        }
    });
}); 

---

Thank you Jabes88, you're my savior! Works beautifully :)

解决方案

Are you going to allow more than one instance with your draggable objects? then use the helper and append option:

$(".tag_cell").draggable({ 
  helper: 'clone',
  appendTo: 'div#myHelperHolder'
});

Then in your css you can set the zindex of div#myHelperHolder to be 999. If not, then try just using the zindex option:

$(".tag_cell").draggable({ 
  zIndex: 999
});

I would also consider setting addClasses to stop the plugin from adding all those annoying classes that waste processor speed.

UPDATE: I HAVE A NEW SOLUTION

Okay after playing with it for a bit I came up with this: the scroll option doesn't stop the child from being hidden with overflow. I've read some other posts and I cant find a single solution. But I came up with a bit of a work-a-round that gets the job done.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("jquery", "1.4.0");
    google.load("jqueryui", "1.7.2");   
    google.setOnLoadCallback(OnLoad);
    function OnLoad(){
        var dropped = false;
        $(".tag_cell").draggable({ 
            addClasses: false,
            revert: 'invalid',
            containment: '#tagFun_div_main',
            helper: 'clone',
            appendTo: '#tagFun_div_helper',
            start: function(event, ui) {
                dropped = false;
                $(this).addClass("hide");
            },
            stop: function(event, ui) {
                if (dropped==true) {
                    $(this).remove();
                } else {
                    $(this).removeClass("hide");
                }
            }
        });
        $("#tf_dropBox").droppable({
            accept: '.tag_cell',
            hoverClass: 'tf_dropBox_hover',
            activeClass: 'tf_dropBox_active',
            drop: function(event, ui) {
                dropped = true;
                $.ui.ddmanager.current.cancelHelperRemoval = true;
                ui.helper.appendTo(this);
            }
        });
    }
    </script>
    <style>
        div#tagFun_div_main { display:block; width:800px; height:400px; margin:auto; padding:10px; background:#F00; }
        div#tf_div_tagsReturn { display:block; width:200px; height:100%; float:left; overflow:auto; background:#000; }
        div#tf_div_tagsDrop { display:block; width:200px; height:100%; float:right; background:#0F0; }
        div#tf_dropBox { display:block; width:100%; height:250px; background:#F0F; }
        span.tag_cell { display:block; width:25px; height:25px; margin:1px; float:left; cursor:pointer; background:#0FF; z-index:99; }
        span.tag_cell.hide { display:none; }
        div#tf_dropBox.tf_dropBox_hover { background:#FFF !important; }
        div#tf_dropBox.tf_dropBox_active { background:#333; }
    </style>
</head>
<body>
    <div id="tagFun_div_main">
        <div id="tf_div_tagsReturn">
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
        </div>
        <div id="tf_div_tagsDrop">
            <div id="tf_dropBox"></div>
        </div>
    </div>
    <div id="tagFun_div_helper">
    <!-- this is where the helper gets appended for temporary use -->
    </div>
</body>
</html>

I pasted my entire code so you can try it out. Here is a brief description: When you start to drag an item it hides the original, clones it, then appends the clone to a container outside the overflow area. Once dropped it removes the original and moves the clone into the drop zone. Great so now we have fixed that overflow issue but run into some others. When you drop the clone item into the drop zone it disappears. To stop that from happening I used this method:

$.ui.ddmanager.current.cancelHelperRemoval = true;

Now we have stopped the helper from being removed but it remains in "div#tagFun_div_helper" while the original draggable item has reappeared.

ui.helper.appendTo(this);

This will transfer the helper from "div#tagFun_div_helper" into our drop zone.

dropped = true;

This will tell our stop function to delete the original item from the group instead of removing the ".hide" class. Hope that helps!

这篇关于jquery ui draggable元素不能“滚动”在滚动div之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！