jQuery-排序时的项目克隆

时间:2018-06-20 10:20:33

标签: jquery drag-and-drop

我正在使用可排序的Jquery。

我的代码允许用户从库存拖放到购物篮数量。当他将物品放到麻袋中时,该物品不会从库存中删除,这很好。 一切正常

问题是我还允许用户对每个购物篮中的物品进行排序,而当他这样做时,脚本会克隆该物品,这不是很好

我该怎么办?

$( ".attrac" ).draggable({
    connectToSortable: ".dropZone",
    helper: "clone",
    revert: "invalid"           
});


$(document).ready(function() {  

    $( ".dropZone" ).sortable({
        revert: true,
        update: function(event, ui) {

            $.ajax ({
              type: 'POST',
              url: 'ajax/secs-control.php',
              data: data,
              dataType: 'json',
              async: false,
              success: function (data) 
                  {


                  }
              });

        }               

    });

    defineDragItems();


} );

HTML

<div class="well dropZone" id="sec12">
    Drag & drop here                    
    <div class="panel panel-info attrac ui-widget-content fadeSec" data-id="attrac-2" >

        <div class="panel-heading">
            The World  Remembrance
            <span class="pull-right">
                <a href="#" class="delBtn-attrac2sec text-danger" data-attracID="2" data-secID="12" data-pos="2"><i class="fa fa-trash"></i></a>
            </span>
        </div>

        <div class="panel-body">Plan a memorable visit</div>

    </div>  

    <div class="panel panel-info attrac ui-widget-content fadeSec" data-id="attrac-43" >

        <div class="panel-heading">
            Header of second item
            <span class="pull-right">
                <a href="#" class="delBtn-attrac2sec text-danger" data-attracID="43" data-secID="12" data-pos="3"><i class="fa fa-trash"></i></a>
            </span>
        </div>

        <div class="panel-body">body second item</div>

    </div>      
</div>                                  

1 个答案:

答案 0 :(得分:0)

我将我的拖动项类别分开:

$( ".attrac-clone" ).draggable({
    connectToSortable: ".dropZone",
    helper: "clone",
    revert: "invalid"           
});

$( ".attrac-unique" ).draggable({
    connectToSortable: ".dropZone",
    helper: "original",
    revert: "invalid"           
});