Question

请找到fiddle。在将元素放回“事件”区域时，元素排序工作正常。但问题是当我从“事件”区域拖动一个元素时，该元素占用的空间将不会被删除。我想从“事件”区域拖动元素时删除该空格或排序。条件是我不想使用sortable的{{1}}。我不想在“Drop”区域进行排序。

如jsfiddle所示，“Drop”区域没有排序，但“事件”区域有排序。但是“事件”的排序只有在元素被放入其中时才有效。

例如，如果我拖动“事件2”并将其放在“丢弃”区域，则“事件1”和“事件3”之间的空间仍然存在。我想删除那个空间。所以订单将是Event1，Event3，当我将“Event 2”放回“Events”时，订单将是Event1，Event2，Event3。

jquery ui

如何在拖动时删除可拖动元素或排序元素之间的空格?????

Answer 1

让你的#timeline可以删除并删除类似这样的排序JSFiddle此外，你可以实现“on hover”

$('#timeline').droppable({
          accept: ".ui-draggable",      
          tolerance: 'touch',
          drop:function(event, ui){
                // event sorting
                console.log(':::inside drop of eventlist:::');
                var $item=ui.draggable;
                $(this).append($item);
                $item.css({top:0,left:0});

                var seen=[]; 

                $(this).find('.ui-draggable').each(function(index,item)
                {
                    seen.push($(item).attr('id'));
                });
                console.log(':::seen array:::',seen);    
                //seen.sort();
                for(var i = 0 ; i < seen.length ; i++){                    
                    $(this).append($(this).find('#'+seen[i]));
                }
          }
      });

Answer 2

仅供提示，您必须在以下事件中通过jquery更改CSS： -

$("li.ui-draggable").draggable({                              
    revert: "true",
    stop: function( event, ui ) {
     $(this).appendTo('ul');
    // Change in CSS code
    }
 });

在下面的DIV中删除项目时会触发此事件。

Answer 3

如果它对你有用，请检查一下 Fiddle

$("#origin").sortable({
    connectWith: "#drop"
});

$("#drop").sortable({
    connectWith: "#origin"
});

jquery ui - 删除可拖动元素之间的空格

3 个答案: