Question

我正在使用拖放元素进行应用程序。当一个elemenet被grag并将其放到另一个元素时，当时我想使用jquery.Any body将drag元素拖放到同一类drop元素的所有元素提出任何建议？

我的代码

    <!doctype html>
   <html lang="en">
   <head>
   <meta charset="utf-8">
   <title>jQuery UI Droppable - Default functionality</title>
   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
   <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
   <link rel="stylesheet" href="//code.jquery.com/ui/1
  .11.2/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #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; 
   }
    </style>
    <script>
    $(function() {
    $( "#draggable" ).draggable();
    $( ".droppable" ).droppable({
    drop: function() {

    }
    });
   });
   </script>
  </head>
  <body>

  <div id="draggable" class="ui-widget-content">
   <p>Drag me to my target</p>
  </div>
  <div class="droppable" >
  <p>Drop here</p>
  </div>
  <div class="droppable" >
  <p>Drop here</p>
  </div>   
  <div class="droppable" >
 <p>Drop here</p>  
   </div>
  </body>
  </html>

Answer 1

$(document).ready(function(){
    $( "#draggable" ).draggable({revert: 'invalid'});
    $( ".droppable" ).droppable({
    drop: function(e, ui) {
        if (!$(".droppable").hasClass('valid')){
        $(".droppable").append(ui.draggable);
        $(".droppable").addClass("valid");
        }

    }
    });
 });

这将只添加一次draggable元素..

Fiddle it out

Answer 2

您可以执行类似

的操作

＆＃13;

$(function() {
  $("#draggable").draggable();
  $(".droppable").droppable({
    drop: function(e, ui) {
      ui.draggable.detach();
      $(".droppable").append(ui.draggable);
    }
  });
});

＆＃13;

#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;
}

＆＃13;

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>

<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>
<div class="droppable">
  <p>Drop here</p>
</div>
<div class="droppable">
  <p>Drop here</p>
</div>
<div class="droppable">
  <p>Drop here</p>
</div>

＆＃13;

在使用jquery删除一个元素时，具有相同类的所有元素都是可删除的

2 个答案: