드래그 가능/정렬 가능한 도우미가 일시적으로 존재 함으로 인해 저장된 ID가 깨졌습니다.

Question

Draggable example 하나의 요소 사본을 다른 요소의 정렬 가능한 목록으로 드래그 할 수 있습니다. 내가하고 싶은 일은 목록에서 드래그 된 모든 새로운 요소를 서로 구별 할 수 있도록 ID로 할당하는 것입니다. 문제는 당신이이 요소들을 움직이기 시작했을 때, 당신이 그 요소를 끌고있는 것처럼 보이지만 실제로는 당신은 마치 그 것처럼 보이는 생성 된 도우미를 끌고있는 것처럼 보입니다. 처음 I는 정렬 가능한 배치 요소의 ID를이 경우 ui.item에 저장된 HTML 요소

model = []; 
$("#sortable").sortable({ 
     revert: true, 
     stop: function(event, ui){ 
      ui.item[0].id = id++; 
      model.push(id); 
     } 
     console.log(model);   
     } 
    }); 

막을 새롭게 설정 하였다 [0]리스트에 보관된다 요소, 그리고 그 헬퍼 클론이었다 . 문제는 이전에 말했듯이, 당신이 그것을 다시 옮기려고 할 때,이 요소는 파괴 된 것으로 보이며 새로운 요소가 생성 될 것입니다. 새 요소에는 새 ID가 주어지며 선택기가 잘못되어 원래 ID에 연결된 모든 기능이 중단됩니다. sortable 내에서 드래그하는 동안 임시 변수를 설정할 수 있습니다. 또는 프로젝트를 통해 새 ID를 영속화 할 수 있지만 Sortable에 이미 내장 된 것으로 기대됩니다. Sortable에서이 문제를 처리 할 수있는 방법이 있습니까? 복제 문제?

내 코드는 this plunker에서 사용할 수 있습니다.

Answer 1

DEMO JS 코드 :

var id=1; 
$("#sortable").sortable({ 
    revert: true, 
    stop: function(event, ui) { 
     if (ui.item.hasClass("new-item")) { 
      // This is a new item 
      ui.item.removeClass("new-item"); 
      ui.item.html("New element id = "+id); 
      ui.item.attr('id', id); 
      id++; 
     } 
    } 
}); 
$(".new-item").draggable({ 
    connectToSortable: "#sortable", 
    helper: "clone", 
    revert: "invalid" 
}); 
$("ul, li").disableSelection(); 

HTML :

<ul> 
    <li class="new-item ui-state-highlight">Drag me down</li> 
</ul> 

<ul id="sortable"> 
    <li class="ui-state-default">Item 1</li> 
    <li class="ui-state-default">Item 2</li> 
    <li class="ui-state-default">Item 3</li> 
    <li class="ui-state-default">Item 4</li> 
    <li class="ui-state-default">Item 5</li> 
</ul> 

주의 : 사물이 작동하지 않습니다 없이는 드래그 할 수있는 요소에 새 클래스를 new-item를 추가!