끌어서 놓기 JQuery를 사용하여 특정 항목 만 이동하는 방법?

모든 항목을 div로 이동하고 싶지 않습니다. 나는 UL 의 첫 번째 요소는 다른 UL이나 모든 요소에을 STOREID 이동하려는 또 다른끌어서 놓기 JQuery를 사용하여 특정 항목 만 이동하는 방법?

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Sortable - Connect lists</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <style> 
    #sortable1, #sortable2 { 
    border: 1px solid #eee; 
    width: 142px; 
    min-height: 20px; 
    list-style-type: none; 
    margin: 0; 
    padding: 5px 0 0 0; 
    float: left; 
    margin-right: 10px; 
    } 
    #sortable1 li, #sortable2 li { 
    margin: 0 5px 5px 5px; 
    padding: 5px; 
    font-size: 1.2em; 
    width: 120px; 
    } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#sortable1, #sortable2").sortable({ 
     connectWith: ".connectedSortable" 
    }).disableSelection(); 
    }); 
    </script> 
</head> 
<body> 

<ul id="sortable1" class="connectedSortable"> 
    <li class="ui-state-default">StoreID</li> // I want to move only this STOREID li element to another UL 
    <li class="ui-state-default">ItemLookupCode</li> 
    <li class="ui-state-default">ExtendedCost</li> 
    <li class="ui-state-default">Quantity</li> 
    <li class="ui-state-default">Price</li> 
</ul> 

<ul id="sortable2" class="connectedSortable"> 

</ul> 


</body> 
</html>

에 특정 항목 폼을 하나 개의 사업부를 이동하고자합니다. 그것을 성취하는 방법.

감사

이 가장 update 또는 receive 콜백을 사용하여 수행됩니다

출처

2017-03-11 mohamed hafil

그래서 storeId 만 다른 ul로 이동하겠습니까? – rahulsm

@rahul_m 예. 나는 또 다른'# sortable3' id를 가지고 있는데, 거기에'# sortable1'의'ExtendedCost, Quantity, Price' 만 드롭하면 안됩니다. –

@mohamedhafil 귀하의 요청이 이상합니다. 1 개의 항목 만 끌고 싶다면 왜 list1을 정렬 할 수 있습니까? 아니면 목록 1과 2 둘 다 정렬 가능해야하지만 StoreID 만 목록 2로 옮길 수 있다는 의미입니까? – Twisty

. 키 : ui.sender.sortable("cancel"); 변경 사항을 되돌립니다.

작업 예 : https://jsfiddle.net/Twisty/4f5yh3pa/

HTML

<ul id="sortable1" class="connectedSortable"> 
    <li class="ui-state-default acceptable">StoreID</li> 
    <li class="ui-state-default">ItemLookupCode</li> 
    <li class="ui-state-default">ExtendedCost</li> 
    <li class="ui-state-default">Quantity</li> 
    <li class="ui-state-default">Price</li> 
</ul> 

<ul id="sortable2" class="connectedSortable"> 
</ul>

CSS

.connectedSortable { 
    border: 1px solid #eee; 
    width: 142px; 
    min-height: 20px; 
    list-style-type: none; 
    margin: 0; 
    padding: 5px 0 0 0; 
    float: left; 
    margin-right: 10px; 
} 

#sortable1 { 
    background: #fff; 
} 

#sortable2 { 
    background: #999; 
} 

.connectedSortable li { 
    margin: 0 5px 5px 5px; 
    padding: 5px; 
    font-size: 1.2em; 
    width: 120px; 
}

자바 스크립트

$(function() { 
    $(".connectedSortable").sortable({ 
    connectWith: ".connectedSortable", 
    update: function(e, ui) { 
     if ($(e.target).attr("id") == "sortable2") { 
     if (ui.item.hasClass("acceptable")) { 
      console.log($(this).attr("id") + " accepted item: ", ui.item); 
     } else { 
      console.log($(this).attr("id") + " rejected item: ", ui.item); 
      ui.sender.sortable("cancel"); 
     } 
     } 
    } 
    }).disableSelection(); 
});

당신이 더 드랙 가능하게 보이게하려면 이것을 움직이게 할 수 있습니다.

출처

2017-03-13 20:06:11 Twisty

더 많은 플러시 아웃 : https://jsfiddle.net/Twisty/4f5yh3pa/6/ – Twisty

끌어서 놓기 JQuery를 사용하여 특정 항목 만 이동하는 방법?

답변

관련 문제