1

我正在使用 jQuery UI Droppable ...

我需要像拖放一样的功能来单击 Draggable 中的星形图标，它必须添加到 Droppable 容器中。我尝试成功。

但是，当我试图<li>从 Droppable 容器中删除元素时，相同的技巧（克隆）不起作用......这里..点击关闭图标它应该只关闭与<li>可拖动区域相关的。

请问有什么快速的建议吗？

是否有可能：

  • 克隆（单击星形图标）仅限于一次......同时它正在<li>为多次点击创建多个 s。

小提琴

截图供参考

以供参考

HTML

<div class="mn-items">
  <h2>Drag</h2>
  <div id="catalog">
      <ul class="rp-draggable">
        <li class="one">Item 1 <i class="fa fa-star-o"></i></li>
        <li class="two">Item 2 <i class="fa fa-star-o"></i></li>
        <li class="three">Item 3 <i class="fa fa-star-o"></i></li>
        <li class="four">Item 4 <i class="fa fa-star-o"></i></li>
        <li class="five">Item 5 <i class="fa fa-star-o"></i></li>
        <li class="six">Item 6 <i class="fa fa-star-o"></i></li>
      </ul>
  </div>
</div>

<div class="header-favorites">
  <h2>Drop Here...</h2>
    <ul class="h-droped-list">
      <li class="placeholder">Add your items here</li>
    </ul>
</div>

jQuery

$(document).ready(function(){

    /* jQuery Droppable */
    $(function() {
        $( ".mn-items .rp-draggable li" ).draggable({
            appendTo: "body",
            helper: "clone"
        });
        $( ".header-favorites ul" ).droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function( event, ui ) {
                $( this ).find( ".placeholder" ).remove();
                $(ui.draggable).clone().appendTo(this);
            }
        }).sortable({
            items: "li:not(.placeholder)",
            sort: function() {
                $( this ).removeClass( "ui-state-default" );
            }
        });
    });


    /* Click Star Icon to Add to Drop Here Container */
    $('ul.rp-draggable li .fa-star-o').click(function(){
        $(this).closest('li').clone().appendTo('.h-droped-list');
        $(this).closest('li').toggleClass('addedToFav');
    });

    /* Click Close Icon to Remove from Drop Here Container */
    $("ul.h-droped-list li .fa-star-o").click(function(){
        $(this).closest('li').remove();
    });

});
4

2 回答 2

0

删除 buttonli是动态添加的，您需要使用事件委托将事件附加到它们：

$("ul.h-droped-list").on('click','li .fa-star-o',function(){
    $(this).closest('li').remove();
});

工作演示

于 2015-04-24T11:19:17.187 回答
0

问题是您需要将点击事件委托给其父级以动态添加元素

 /* Click Close Icon to Remove from Drop Here Container */
$('.header-favorites').on('click',"ul.h-droped-list li .fa-star-o",function(){
   $(this).closest('li').remove();
});

演示

于 2015-04-24T11:22:05.700 回答