jQuery를 사용하여 항목을 정렬 가능한 목록에 놓을 때 항목의 속성을 수정하는 경우

Question

양식 목록에있는 항목 목록을 양식 요소에 포함 된 대상 목록으로 가져 왔습니다. 'name'속성을 정적으로 지정할 수 있기 때문에 하나의 대상 목록에 대해이 작업을 올바르게 수행 할 수 있습니다. 그러나 여러 대상 목록을 지원하는 방법을 알아 내려고 노력하고있어 대상 목록에서 ID를 가져 와서이를 정렬 할 수있는 입력 필드에 이름 특성으로 동적으로 추가 할 수 있다고 생각했습니다. 목록에서 각 목록을 별도의 배열로 제출할 수 있습니다.

<div> 
     Available Items 
     <ul id="avail"> 
     <li><input type="hidden" name="options[]" value="1">Option 1</li> 
     <li><input type="hidden" name="options[]" value="2">Option 2</li> 
     <li><input type="hidden" name="options[]" value="3">Option 3</li> 
     <li><input type="hidden" name="options[]" value="4">Option 4</li> 
     </ul> 
    </div> 
    <p class="clear"></p> 
    <form action="myForm.php" method="post" enctype="multipart/form-data"> 
     <div style="float:left;"> 
     List #1 
     <ul class="sortable" id="list1"> 
     </ul> 
     </div> 
     <div style="float:left;margin-left:5px;"> 
     List #2 
     <ul class="sortable" id="list2"> 
     </ul> 
     </div> 
     <div class="clear"></div><br> 
    </form> 

을 다음과 같은 jQuery를 : : 내, 정렬 드래그하고 드롭 가능한 기능은 다음과 같은 코드를 정확하게 내가 원하는 방식으로 작업하는

$('#avail li').draggable({ 
     connectToSortable: ".sortable", 
     helper: "clone", 
     opacity: 0.75, 
    }); 
    var sortableIn; 
    $('.sortable').sortable({ 
     receive: function(event, ui) { 
     sortableIn = 1; 
     }, 
     over: function(event, ui) { 
     sortableIn = 1; 
     }, 
     out: function(event, ui) { 
     sortableIn = 0; 
     }, 
     beforeStop: function(event, ui) { 
     if (sortableIn == 0) { 
      ui.item.remove(); 
     } 
     } 
    }).droppable({ 
     greedy: true 
    }); 

당신은 this fiddle에 대한 조치에서 볼 수 있습니다. 이 예제를 기반으로 요약하기 위해이 옵션 중 하나에 옵션이 드롭되면 'option []'을 입력 필드의 name 속성으로 'list1 []'또는 'list2 []'로 바꾸려고합니다. .

"수신"기능 또는 "드롭"기능에서 attr ('name', $ (this) .attr ('id'))과 같은 것을 사용해야한다고 가정합니다. 정확히 어디에 넣을 지, 입력 필드를 포함하는 <li> 대신에 attr() 변경의 대상으로 입력 필드를 정의하는 방법을 확실히 알고 있어야합니다.

---

해결 방법 : 나는 update에 receive 기능을 변경하고 지금처럼 보인다 그래서 그것을 구불 구불 한 두 번째 코드를 추가 :

이

update: function(event, ui) { 
    sortableIn = 1; 
    ui.item.find("input").attr("name", $(this).attr("id") + '[]'); 
} 

Answer 1

내가의 data-list 속성에 넣어 것 목적지 요소. 당신이 ID를 읽을 수

ui.item.find("input").attr("name", "list" + $(this).data("list") + "[]"); 

또는 :

<ul class="sortable" id="list1" data-list="1"> 
</ul> 

<ul class="sortable" id="list2" data-list="2"> 
</ul> 

다음 receive, 당신은 당신이 name 속성에 원하는 값을 할당 할 수 있습니다 : 예를 들어

ui.item.find("input").attr("name", $(this).attr("id") + "[]"); 

이됩니다 수신 된 항목 :

name="list1[]" 
name="list2[]" 

$(this)은 요소를 드래그 한 정렬 가능한 목록이므로 데이터에서 목록 번호가 할당됩니다.