使 div 对于某些元素可拖动和可放置

发布于 2024-12-03 02:35:50 字数 300 浏览 0 评论 0原文

我有一个带有可拖动和可放置的 div 的页面。每个 div 都包含可拖动的嵌套 div。我希望能够将嵌套的 div 从 div 1 拖放到 div 2 上，反之亦然。我尝试执行此操作的 jsfiddle 位于此链接 http://jsfiddle.net/fWhDn/

如果我将 msn.com 链接（可拖动的 div）从 div 2 移动到 div 1，它不会放入该 div 中。我必须修复什么才能获得正确的行为，即该链接成为 div 1 的一部分的位置？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你是我的挚爱i 2024-12-10 02:35:50

要使其正常工作，您必须将可拖动的 div 附加到相应的可放置的 div 中。您可以通过 droppable init 内的 drop 事件来完成此操作。我为每个可放置的 div 设置了它，以便访问 $(this)。重置项目的 css 也很重要，因为如果不重置它，它将保留您拖动它时的位置。以下是我添加的内容：

$( "#editdiv .droppable" ).droppable({
    drop: function( event, ui ) {
        var $item = ui.draggable;
        $item.fadeOut(function() {

        $item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
    });
$item.appendTo( this );
    }
});
$( "#editdiv_ .droppable" ).droppable({
    drop: function( event, ui ) {
        var $item = ui.draggable;
        $item.fadeOut(function() {

        $item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
    });
$item.appendTo( this );
}
});

这是更新的小提琴： http://jsfiddle.net/TpbZk/

To get this to work you have to append the draggable div to the respective droppable div. You can do this through the drop event inside the droppable init. I set it up for each droppable div in order to get access to the $(this). It's also important to reset the css of the item as if not it will carry over the position it had when you were dragging it. The following is what I added:

$( "#editdiv .droppable" ).droppable({
    drop: function( event, ui ) {
        var $item = ui.draggable;
        $item.fadeOut(function() {

        $item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
    });
$item.appendTo( this );
    }
});
$( "#editdiv_ .droppable" ).droppable({
    drop: function( event, ui ) {
        var $item = ui.draggable;
        $item.fadeOut(function() {

        $item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
    });
$item.appendTo( this );
}
});

And here's the updated fiddle: http://jsfiddle.net/TpbZk/

回复收藏 0 原文

~没有更多了~