如何在目标可排序后收到被拖动项目的类?

时间:2016-02-25 12:35:49

标签: javascript asp.net-mvc drag-and-drop

 $(".target").droppable({
                connectWith: ".connected",
                drop: function (event, ui) {
                    var targetId = event.target.id;//--> id of the target (where elements will be dropped into)
                    var orderId;//--> id of the dragged element (NOT the targetId)

                    if ($(this).hasClass("source connected")) {
                        orderId = sourceElementSo;
                    }
                    else {
                        orderId = $(ui.draggable).attr("id");
                    };

我尝试过ui.item和ui.draggable,但没有成功

PS:新手:)

1 个答案:

答案 0 :(得分:0)

 $(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
    connectWith: ".connected",
      drop: function( event, ui ) {  
       var targetId = event.target.id;//--> id of the target (where elements will be dropped into)
                    var orderId;//--> id of the dragged element (NOT the targetId)

                    if (ui.draggable.hasClass("connected")) {
                      	console.log("ok");
                        orderId = sourceElementSo;
                    }
                    else {
                        orderId = $(ui.draggable).attr("id");
                    };
      }
    });
  }); 
  #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 
<div id="draggable" class="ui-widget-content connected">
  <p>Drag me to my target</p>
</div>
 
<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>