javascript - 如何将委托(delegate)用于 UI 可拖动？

Question

我必须为页面上插入的那些新元素添加 draggable 和 droppable，但是由于它们还没有像在页面加载期间完成的那样继承 draggable 和 droppable，我必须为那些手动添加 draggable 和 droppable新创建的元素。

对于点击事件，我可以简单地这样做

$('body').on({
   click:function(){
    //codes here
  }

},'#element');

但是当我处理可拖动和可放置时这似乎不起作用

我的可拖动设置是这样的

$('.photo-segment').draggable({
        containment:'#layout-draggable',
        axis:'y',
        scroll:false,
        revert:"invalid",
        drag:function(event,ui){
            $(this).css({'z-index':9999, 'opacity':'0.8'});
        },
        stop:function(event,ui){
            $(this).css({'z-index':'', 'opacity':'1'});
        }
    });

我像这样设置可放置

$('.photo-segment-container').droppable({
        accept:'.photo-segment',
        tolerance:'intersect',
        over:function(event, ui){
            //codes here
        },
        drop:function(event, ui){
            //codes here
        }, 
        deactivate:function(event,ui){
            return false;
        }

    });

我本可以在创建这些元素后立即手动运行上面的所有代码，我已经做了类似的事情

$('.photo-segment').draggable();
$('.photo-segment-container').droppable();

但在这种情况下，我无法检索所有这些设置。我是否必须再次运行初始设置？

Answer 1

是的，您需要为新添加的元素再次初始化 draggable/droppable。

您可以将设置保存在单独的对象中，以免重复代码。

var dragSettings = {...};
...
$('.photo-segment').draggable(dragSettings);