Question

我想将多个JQuery draggable分类为多个JQuery droppable。

例如我有三个项目RED，BLUE＆amp;绿色。 RED只能放在RED BOX上，GREEN放在GREEN BOX＆amp;蓝色到BLUE BOX

<div class="draggable RED">
<p>RED ITEM</p>
</div>

<div class="draggable BLUE">
 <p>BLUE ITEM</p>
</div>

<div class="draggable GREEN">
 <p>GREEN ITEM</p>
</div>


<div class="droppable" title="RED">
 <p>RED BOX</p>
</div>

<div class="droppable" title="BLUE">
 <p>BLUE BOX</p>
</div>

<div class="droppable" title="GREEN">
 <p>GREEN BOX</p>
</div>

这是我尝试过的JQuery没有成功。

   $(function() {
  $( ".draggable" ).draggable();
  $( ".droppable" ).droppable({
   accept: '.'+$(this).attr("title"), 
   activeClass: "ui-state-hover",
   hoverClass: "ui-state-active",
   drop: function( event, ui ) {
    $( this )
     .addClass( "ui-state-highlight" )
     .find( "p" )
      .html( "Dropped!" );
   }
  });
 });

我不确定如何构造accept子句以仅接受与droppable的title属性匹配的draggable。

Answer 1

我认为这可能会有所帮助：

$(function() {
  $( ".draggable" ).draggable();

    $( ".droppable" ).each(function (index){

        var title = '.'+$(this).attr('title');

        $(this).droppable({      
           accept:  title,
           activeClass: "ui-state-hover",
           hoverClass: "ui-state-active",
           drop: function( event, ui ) {
            $( this )
             .addClass( "ui-state-highlight" )
             .find( "p" )
              .html( "Dropped!" );
           }
          }); 
    });
 });

如何使用accept参数将多个draggable分类为多个droppable？ JQUERY

1 个答案: