可拖动元素的包含
如何定义可拖动对象的包含区域以使其可拖动到其父元素之外?我有两个可放置的容器,其中有可拖动的 div。我想在容器之间拖动包含的 div。但是 div 落在父容器的边框下方,而不是穿过父容器的边框。如果我设置了非常高的 z 索引,我只能让 div 从一个容器移动到另一个容器,这会导致 div 并未真正放置在容器中。这会扰乱页面显示。
这是 http://jsfiddle.net/gkvgn/8/ 的 jsfiddle。 jsfiddle 中的相关代码是使容器 div 可拖动和可放置的函数,以及使所包含的 div 元素通过包含“文档”可拖动的函数。
$(function() {
$( "#editdiv" ).resizable();
$( "#editdiv" ).draggable();
$( "#editdiv" ).draggable("option", "handle", '#heading');
$( "#editdiv2" ).resizable();
$( "#editdiv2" ).draggable();
$( "#editdiv2" ).draggable("option", "handle", '#heading');
$( ".comurl" ).draggable();
$( ".comurl" ).draggable("option", "handle", '#dhandle');
$( "div.droppable" ).droppable({
drop: function( event, ui ) {
var $item = ui.draggable;
$item.fadeOut(function() {
$item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
});
$item.appendTo( this );
}
});
$( ".comurl" ).draggable({ containment: 'document' });
});
如果我将容器更改为“父级”或“窗口”,则容器中的可拖动 div 似乎比选择“文档”时受到更多限制。
由于我认为 z-index 是一个问题,因此我在 css 中为 ui-draggable-dragging 类设置了 z-index。
.ui-draggable-dragging {
z-index: 999999;
background-color: red;
}
我必须修复什么才能将元素 div(例如 Facebook.com)从第一个容器拖动到第二个容器?谢谢。
How do I define the containment area for a draggable to have it draggable outside of its parent element? I have two droppable containers that have draggable divs in them. I want to drag the contained divs between the containers. But the divs drop under the border of the parent container instead of going across. I can only get the divs to go from one container to another if I set a very high z index, which causes the divs to not really be place in the container. This messes up the page display.
Here is the jsfiddle for this http://jsfiddle.net/gkvgn/8/. The relevant code in that jsfiddle is that function where the container divs are made draggable and droppable and where the contained div elements are made draggable with containment of 'document'.
$(function() {
$( "#editdiv" ).resizable();
$( "#editdiv" ).draggable();
$( "#editdiv" ).draggable("option", "handle", '#heading');
$( "#editdiv2" ).resizable();
$( "#editdiv2" ).draggable();
$( "#editdiv2" ).draggable("option", "handle", '#heading');
$( ".comurl" ).draggable();
$( ".comurl" ).draggable("option", "handle", '#dhandle');
$( "div.droppable" ).droppable({
drop: function( event, ui ) {
var $item = ui.draggable;
$item.fadeOut(function() {
$item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
});
$item.appendTo( this );
}
});
$( ".comurl" ).draggable({ containment: 'document' });
});
If I change the containment to 'parent' or 'window' the draggable divs in the container seem to be more constrained than if I select 'document'.
Since I thought that z-index was an issue, I set the z-index for the ui-draggable-dragging class in the css.
.ui-draggable-dragging {
z-index: 999999;
background-color: red;
}
What must I fix to be able to drag an element div, e.g. Facebook.com from the first container to the second? Thanks.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
必须删除
overflow:hidden;
http://jsfiddle.net/gkvgn/10/ 。
Had to remove
overflow: hidden;
http://jsfiddle.net/gkvgn/10/ .