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

请找到这个。在这里，当我将元素放回“事件”区域时，元素的排序工作正常。但问题是，当我从“事件”区域拖动一个元素时，该元素占用的空间不会被移除。当元素从“事件”区域拖动时，我想删除那个空间或排序。条件是我不想使用

jqueryui

的

sortable

。我不想在“下降”区域排序

如JSFIDLE所示，在“Drop”区域没有排序，但在“Events”区域有排序。但是，只有当一个元素被放入“事件”中时，“事件”的排序才起作用

例如，如果我拖动“事件2”并将其放置在“放置”区域，则“事件1”和“事件3”之间的空间将保持不变。我想删除那个空间。所以顺序是Event1，Event3，当我把“Event2”放回“Events”时，顺序是Event1，Event2，Event3

$("li.ui-draggable").draggable({
     revert: "true",
 });

 $("#eventlist").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]));
         }
     }
 });

$（“li.ui可拖动”）.draggable({
回复：“真”，
});
$（“#事件列表”）。可拖放({
接受：“.ui可拖动”，
宽容：“触摸”，
drop：函数（事件、用户界面）{
//事件排序
log（'：：：在事件列表的下拉列表中：：'）；
var$item=ui.draggable；
$（此项）。附加（$项）；
$item.css({
排名：0，
左：0
});
var=[]；
$（this）.find（'.ui draggable'）。每个（函数（索引，项）{
seen.push（$（item.attr（'id'））；
});
log（'：：：seed数组：：'，seed）；
seen.sort（）；
对于（var i=0；i

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

使您的时间线可拖放并删除排序类似的内容另外，您可以实现“悬停”

$（“#时间线”）。可拖放({
接受：“.ui可拖动”，
宽容：“触摸”，
drop：函数（事件、用户界面）{
//事件排序
log（'：：：在事件列表的下拉列表中：：'）；
var$item=ui.draggable；
$（此项）。附加（$项）；
$item.css（{top:0，left:0}）；
var=[]；
$（this）.find（'.ui draggable'）。每个（函数（索引，项）
{
seen.push（$（item.attr（'id'））；
});
log（'：：：seed数组：：'，seed）；
//seen.sort（）；
对于（var i=0；i

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

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

---

当项目被放入下面的分区时，将触发此事件。

检查此事件是否对您有用

---

请创建一个最小的jsfiddle.Make

.sortable（'disable'）

.sortable（'disable'）这对我有什么帮助？？？-@anupt问题是在拖动或排序除拖动的元素之外的元素时删除空格。当我将元素放回事件列表时，排序工作正常。-@AnupWaiting等待您的回复。-@AnupI打算使用[“over”]或“hoverClass”来表示您的时间表“可以接受”事件。这不是这样的。元素可以放置在“放置”区域的任何位置。当我拖动一个元素时，我希望在“事件”中的元素之间排序/删除空格。当我将元素放回“事件”中时，“事件”中的排序就起作用了。如果您提供完整的代码，这将非常有帮助。-@anupn不是这样的。“事件”应可在“事件”区域进行排序，并应放置在“放置”区域的任何位置-@尼利斯

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

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

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