31

我把我的屏幕分成了两个DIV。在左边DIV我有几个 50x50 像素DIV，在右边DIV我有一个由 80x80 组成的空网格LI。左边的DIVs 是可拖动的，一旦放在 a 上LI，它们应该对齐到 的中心LI。

听起来很简单，对吧？我只是不知道如何完成这件事。我尝试通过操纵 dropDIV的 'stop和leftCSS 属性来匹配LI它们被放入的那些，但是leftandtop属性是相对于 left 的DIV。

我怎样才能最好地让放置的元素捕捉到它放置的元素的中心？这一定很简单，对吧？

编辑：我将 jQuery UI 1.7.2 与 jQuery 1.3.2 一起使用。

编辑2：对于其他有此问题的人，这就是我修复它的方法：

我使用了 Keith 的解决方案，即删除拖动的元素并将其放置在dropdroppable 插件回调中的 drop-on 元素中：

function gallerySnap(droppedOn, droppedElement)
{
    $(droppedOn).html('<div class="drop_styles">'+$(droppedElement).html()+'</div>' );
    $(droppedElement).remove();
}

我不再将放置的元素再次拖动，但如果这样做，只需将可拖动元素再次绑定到它。

对我来说，这种方法还解决了我在放置放置的元素（相对于 left DIV）和在第二个内部滚动时遇到的问题DIV。（元素将保持固定在页面上，现在它们滚动）。

我确实使用了捕捉选项以使其在拖动时看起来不错，因此感谢 karim79 的建议。

我可能不会因此赢得任何 Awesome Code 奖品，所以如果您看到改进的空间，请分享！

4

7 回答 7

75

我发现基思的方法对我有用。由于他的回答不包括示例实现，我将发布我的：

$('.dropTarget').droppable({
    drop: function(ev, ui) {
        var dropped = ui.draggable;
        var droppedOn = $(this);
        $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
    }
});

或者，稍微更简洁一点：

$('.dropTarget').droppable({
    drop: function(ev, ui) {
        $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
    }
});
于 2011-05-14T17:50:02.277 回答
16

我有一个类似的问题 - 我通过手动从其旧父级中删除拖动的元素并将其添加到放置的元素来解决它。

于 2009-08-10T12:55:07.643 回答
11

感谢您的帖子-它帮助我朝着正确的方向前进。我发现设置可拖动对象的位置属性而不是弄乱 HTML 代码更简洁。这会将位置设置为对象的左上角droppable，但您也可以修改使其居中。

drop: function(event, ui) {
   $(ui.draggable).css('top', $(this).position().top);
   $(ui.draggable).css('left', $(this).position().left);
}
于 2010-03-28T03:50:03.093 回答
3

我发现当你进行拖动时，jQuery UI 会添加一个内联来告诉你拖放它的位置。下面是我用来将其固定到位的代码示例

$('.droppable').droppable({ drop: function(ev, ui) { 
    //Get Details of dragged and dropped
    var draggedclass = ui.draggable.attr('class'),
        droppedclass = 'class' + $(this).attr('name').toLowerCase();

    //update the classes so that it looks od.       
    ui.draggable.removeClass(draggedclass).addClass(droppedclass);  
    ui.draggable.removeAttr('style');
});
于 2009-08-10T12:53:44.617 回答
3 
$("form li").draggable({snap:'.ui-droppable', snapMode:'inner', revert:true});
$('.drop').droppable({drop:function(ev, ui)
                           {$(ui.draggable).appendTo($(this))
                                           .css({position:'static', left:'0px', top:'0px'})
                                           .draggable('option', 'disabled', false)
                                           .css({position:'relative'});
                           }
                     }
                    );
于 2010-12-20T08:16:02.063 回答
0

如果div左侧的lis 实际上在右侧的 s 中（您可以使用 Firebug 确认），并且如果lis 都在 a 中ul（应该如此），请尝试以下一项或两项操作：

ul#right_div {
  text-align: center;
}

ul#right_div li {
  text-align: center;
}
于 2009-08-10T12:52:29.063 回答
0

根据 Barry 的代码，如果我们想添加一个带有“x”按钮的选项，该元素将再次与新父级分离并重新附加到初始元素上怎么办？

我是这样想的，但似乎没有用..制作某种保持初始状态的变量

var flag;
$('.draggable-div').draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
        $(this).find('.undo').show();
    flag=$(this).parent();
    }
});


$('.draggable-div').find('.undo').click(function(i, e) {
    var $div = $(this).parent();
$($div).detach().appendTo(flag);
 }

某事绝对是错误的，但我不知道你是否能理解这个概念......只是能够扭转你已经下降到初始状态的任何东西。

于 2013-04-04T14:41:13.487 回答