與懸停佔位問題

內投擲的項目排序列表我有內部需要進行整理得的什麼投擲的物品的排序列表。當你拖動旁的下拉項目，其中佔位符是顯示了一個項目，該項目落仍然在積極的佔位符。與懸停佔位問題

一個簡單的小提琴是在這裏：JSFiddle

$("#item-list").sortable(); 

$(".container").droppable({ 
    accept: ".item", 
    drop: function (e, ui) { 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(this).append(dropped.clone().removeAttr('style').removeClass("item").addClass("item-container")); 
     dropped.remove(); 
    } 
});

是否已有此的解決方案？

來源

2017-07-17 Germ Knol

，如果你不想item container類是可排序的使用cancel

$("#item-list").sortable({ 
    cancel: ".item.container" 
});

來源

2017-07-17 17:17:09 ewwink

沒有，它仍然需要排序 –

在這裏，你去與解決方案http://jsfiddle.net/bRbyW/110/

$("#item-list").sortable(); 
 

 
$(".container").droppable({ 
 
    accept: ".item", 
 
    beforeStop: function(event, ui) { 
 
     $(this).html(); 
 
    }, 
 
    drop: function (e, ui) { 
 
     var dropped = ui.draggable; 
 
     var droppedOn = $(this); 
 
     if($(droppedOn)[0].innerHTML.indexOf('<div') < 0) 
 
\t   $(droppedOn)[0].innerHTML = ''; 
 
    $(this).append(dropped.clone().removeAttr('style').removeClass("item").addClass("item-container")); 
 
     
 
     dropped.remove(); 
 
    } 
 
});

.item { 
 
    width:200px; 
 
    height:30px; 
 
    border:1px dashed red; 
 
    margin:10px 0; 
 
    cursor:move; 
 
} 
 
.container { 
 
    height:150px; 
 
    border:1px dashed black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div id="item-list"> 
 
     <div class="item">1</div> 
 
     <div class="item">2</div> 
 
     <div class="item container">dropbox but still sortable</div> 
 
     <div class="item">3</div> 
 
     <div class="item">4</div> 
 
    </div>

來源

2017-07-17 17:24:15 Shiladitya

謝謝Shiladitya，我有一種感覺你幾乎沒有，但是如果我就在Dropbox的排序，更有耐力仍在下降 –

哇，我回答我自己的問題！

的解決方案是，把這個在您的排序選項列表：

refreshPositions: true

這就像一個魅力！

THX大家！

來源

2017-07-18 10:59:25

與懸停佔位問題

回答

相關問題