jQuery를 드래그하고 드롭 가능한 전화 MVC 액션

Question

내가 다른 div에 div에서 마우스로 끈 MVC 응용 프로그램으로 드래그 앤 항목의 드롭을 구현하려고 생각

-이 div가 data-id 전달, 게시물 이벤트를 호출합니다. 그러나 내 문제는 -

코드

<div id="column1" style="width: 400px; background-color: rgba(255, 0, 0, 1)"> 
    <ul style="list-style-type: none;"> 
     <li data-id="1"> 
      <a href="#"> 
       <img src="http://placehold.it/200x200" /> 
      </a> 
     </li> 
    </ul> 
</div> 
<div id="column2" style="width: 400px; background-color: black"> 
    <ul> 
     <li> 
      <a href="#"> 
       <img src="http://placehold.it/200x200" /> 
      </a> 
     </li> 
    </ul> 
</div> 
<script> 
    $("#column li").draggable({ 
     revert: true, 
     drag: function() { 
      $(this).addClass("active"); 
      var a = $(this).closest("#column").addClass("active"); 
     }, 
     stop: function() { 
      $(this).removeClass("active").closest("#column1").removeClass("active"); 
     } 
    }); 
</script> 

위의 잘 작동, 그것은 않습니다 드래그 ... 내가 jQuery를 코딩 비교적 새로운 오전, 그래서 나는 매우 어리석은 뭔가를 누락 될 수 있습니다 떨어지면서. 내가 강하 위를 복제하려고했으나 심지어 경고를 얻을하지 않습니다 Column가 포함 된 ID는 방울을 받아 들여야했다 아무것도 ...

$("#column").droppable({ 
    tolerance: "touch", 
    drop: function (event, ui) { 
     alert('Hello World'); 
     var targetColumn = $(this), 
      move = ui.draggable, 
      itemId = move.attr("data-id"); 
     $.post("Controller/Action", { id: itemId, obj: move }); 
    } 

}); 

어떤 조언을?

감사합니다.

Answer 1

선택기가 어떤 요소와도 일치하지 않으므로 코드가 제대로 작동하지 않을 수 있습니다 (ID가 #column 인 요소가 없음).

클래스 열을 설정하고 draggable 및 droppable에 바인드하려면 선택자로 .column을 사용하는 것이 좋습니다.

HTML :

<div id="column1" class="column" style="width: 400px; background-color: rgba(255, 0, 0, 1)"> 
    <ul style="list-style-type: none;"> 
     <li data-id="1"> <a href="#"> 
       <img src="http://placehold.it/200x200" /> 
      </a> 

     </li> 
    </ul> 
</div> 
<div id="column2" class="column" style="width: 400px; background-color: black"> 
    <ul> 
     <li> <a href="#"> 
       <img src="http://placehold.it/200x200" /> 
      </a> 

     </li> 
    </ul> 
</div> 

jQuery를 :

$(document).ready(function() { 
    $(".column li").draggable({ 
     revert: true, 
     drag: function() { 
      $(this).addClass("active"); 
      var a = $(this).closest("#column").addClass("active"); 
     }, 
     stop: function() { 
      $(this).removeClass("active").closest("#column1").removeClass("active"); 
     } 
    }); 

    $(".column li").droppable({ 
     tolerance: "touch", 
     drop: function (event, ui) { 
      alert('Hello World'); 
      console.log($(this)) 

     } 

    }); 
}); 

데모 : http://jsfiddle.net/IrvinDominin/CASn4/