c# - jQuery draggable and droppable calls MVC action -

i try implement drag , drop of items mvc application, drag div div - div call post event, passing in data-id.

i relatively new jquery coding, may missing stupid...

code

<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 = $(this).closest("#column").addclass("active");         },         stop: function () {             $(this).removeclass("active").closest("#column1").removeclass("active");         }     }); </script> 

the above works fine, drag - issue dropping. has id contains column should accept drops, tried replicate above drop, not alert...

$("#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 });     }  }); 

any advice?

thanks.

your code not working well, because selector not match element (you have no element id #column).

you want set class column , bind draggable , droppable using .column selector.

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 = $(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))          }      }); }); 

demo: http://jsfiddle.net/irvindominin/casn4/