다른 항목 JQuery와 드래그 가능한, 낙하 할, 정렬 가능한

I 끌어 다른 목록으로 목록에서 항목을 삭제하려면 다음 JQuery와 설정이 있습니다다른 항목 JQuery와 드래그 가능한, 낙하 할, 정렬 가능한

// Set what items are draggable 
$(".widgetListItems").draggable(
{ 
    cursor: "move", 
    opacity: 0.5, 
    scroll: false, 
    revert: "invalid", 
    connectToSortable: "#dropList", 
    stop: function (event, ui) { if (deleteItem) { ui.helper.remove(); deleteItem = false; } } 
}); 

// Set what items can have objects dropped into them. 
$(".dropableArea").droppable(
{ 
    accept: ".widgetListItems", 
    tolerance: "touch", 
    drop: function (event, ui) 
    { 
     deleteItem = true; 

     var item = $(ui.draggable).text(); 
     item = $.trim(item); 

     switch (item) 
     { 
      case "Preventative Care": 
       $(this).append($("#panelPreventative")); 
       $("#panelPreventative").show(1000); 
       break; 
      case "Medical Claims": 
       $(this).append($("#panelMedicalClaims")); 
       $("#panelMedicalClaims").show(1000); 
       break; 
      case "Capitation": 
       $(this).append($("#panelCapitation")); 
       $("#panelCapitation").show(1000); 
       break; 
     } 
    } 
}); 

$(".dropableArea").sortable(
{ 
    cursor: "move", 
    connectWith: ".dropableArea", 
    update: function (event, ui) 
    { 
     $(ui.item).css("margin", "30px 0px"); 
    } 
});

I 클래스 "widgetListItems"와 <li>을 가지고있는 것을 사용자가 화면 위로 드래그 할 수 있습니다. 다음으로 droppable은 <ul>이고 "dropableArea"클래스입니다. 사용자가 원했던 경험은 목록에 항목을 놓으면 제거한 항목이 제거되고 대신 클래스 "loadedWidgetPanel"을 사용하여 위젯이 표시됩니다. 저것은 나가 "하락"사건에서하고있는 무슨이다. 또한이 목록을 사용자가 정렬 할 수 있도록 삭제할 수 있습니다. 내가 가진 코드를 사용하면 사용자는 목록에 항목을 놓을 수 있고, 위젯이 표시되며 페이지에있는 위젯을 정렬 할 수 있습니다.

내가 궁금해하는 점은 사용자가 목록에 요소를 드롭하면 위젯이 마지막에 추가되는 대신 사용자가 놓은 지점에 삽입되도록이 목록을 정렬 할 수 있는지 궁금합니다. 나는 그것이 "drop"이벤트에서 내가하고있는 일 때문에 추가된다는 것을 알고 있지만 다른 아이템을 삽입하는 다른 방법을 생각할 수는 없다. 누군가 나를 도울 수 있습니까?

출처

2012-11-14 Eric R.

drop: function() {} 이것은 아이템이 떨어질 때 발동되는 콜백입니다. 이미 가지고있는 로직을 수행 한 후에는 정렬 루틴에 대한 호출을 추가 할 수 있습니다. 신속하고 더러운의 몇 가지 예 jquery alphabetical sort.

출처

2012-11-14 15:11:05

다른 항목 JQuery와 드래그 가능한, 낙하 할, 정렬 가능한

답변

관련 문제