拖放后再次放下元素

Question

我正在尝试使用 jQuery UI 拖放 功能构建 UI，但卡在一个实例中。基本上，我所做的是使内容框在区域中可拖放。

我正在制作一个可拖动框的克隆并放在该区域中。这里的问题是，当一个元素放在任何区域时，它应该拖动并且可以再次放在任何相应区域。

我一直在寻找它的解决方案，但没有找到任何帮助。

谢谢

以下是我正在处理的代码。

/**/
 
 var blockBoxEle = $('.block-box');
 var blockBoxWd = blockBoxEle.width();
 blockBoxEle.css({'width': blockBoxWd});
 var blockBoxLen = blockBoxEle.length;
 for(var x=0; x<blockBoxLen; x++) {
   blockBoxEle.eq(x).addClass('block-count'+(x+1));
 }
 
 blockBoxEle.draggable({
   revert: "invalid",
   stack: blockBoxEle,
   helper: 'clone',
   stop: function(e, ui) {
    
   }
 });
 console.log('blockBoxElements Loaded!!!!!!!');
 
 
 /**/
 var areaBoxEle = $('.area-box');
 var areaBoxLen = areaBoxEle.length;
    for(var y=0; y<areaBoxLen; y++) {
        areaBoxEle.eq(y).prop('id', 'areaBox'+(y+1));
    }
 areaBoxEle.droppable({
   accept: blockBoxEle,
   tolerance: "pointer",
   //greedy: true,
   drop: function(event, ui) {
  var droppable = $(this);
  var draggable = ui.draggable;
   if (droppable.find('.ui-draggable').length) return; 
  var dragClass = draggable.attr("class").split(' ')[1];
  
  var drag = areaBoxEle.has(ui.draggable).length ? draggable : draggable.clone().draggable({
    revert: "invalid",
    stack: blockBoxEle,
    helper: 'clone'
  });
  
  droppable.empty();
  droppable.after(drag).hide();
  console.log('Dropped block class:'+dragClass+' on area id:'+this.id);
   }
 });
 console.log('areaBoxElements Loaded!!!!!!!');

.block-box,
.area-box { margin: 0 0 10px; text-align: center; position: relative; }
.block-box { padding: 10px 5px; border: 2px solid #000; background: red; color: #fff; max-width: 100%; min-width: 100%; z-index: 2; }
.area-box { padding: 30px 5px; border: 2px dashed #333; background: #eee; z-index: 1; }
.block-box h3,
.area-box h3 { margin: 0; font-size: 14px; font-weight: 700; }
#block-fields .block-box { padding-top: 30px; padding-bottom: 30px; }

<link href="https://code.jquery.com/ui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="panel panel-default">
 <div class="panel-body">
  <div class="row">
   <div id="block-panel" class="col-xs-3">
    <div class="row">
     <div class="col-xs-6">
      <div class="block-box">
       <h3>Field 1</h3>
      </div>
     </div>
     <div class="col-xs-6">
      <div class="block-box">
       <h3>Field 2</h3>
      </div>
     </div>
     <div class="col-xs-6">
      <div class="block-box">
       <h3>Field 3</h3>
      </div>
     </div>
     <div class="col-xs-6">
      <div class="block-box">
       <h3>Field 4</h3>
      </div>
     </div>
     <div class="col-xs-6">
      <div class="block-box">
       <h3>Field 5</h3>
      </div>
     </div>
     <div class="col-xs-6">
      <div class="block-box">
       <h3>Field 6</h3>
      </div>
     </div>
     <div class="col-xs-6">
      <div class="block-box">
       <h3>Field 7</h3>
      </div>
     </div>
     <div class="col-xs-6">
      <div class="block-box">
       <h3>Field 8</h3>
      </div>
     </div>
     <div class="col-xs-6">
      <div class="block-box">
       <h3>Field 9</h3>
      </div>
     </div>
     <div class="col-xs-6">
      <div class="block-box">
       <h3>Field 10</h3>
      </div>
     </div>
     <div class="col-xs-6">
      <div class="block-box">
       <h3>Field 11</h3>
      </div>
     </div>
     <div class="col-xs-6">
      <div class="block-box">
       <h3>Field 12</h3>
      </div>
     </div>
     <div class="col-xs-6">
      <div class="block-box">
       <h3>Field 13</h3>
      </div>
     </div>
     <div class="col-xs-6">
      <div class="block-box">
       <h3>Field 14</h3>
      </div>
     </div>
     <div class="col-xs-6">
      <div class="block-box">
       <h3>Field 15</h3>
      </div>
     </div>
    </div>
   </div>
   <div id="block-fields" class="col-xs-9">
    <div class="row">
     <div class="col-xs-3">
      <div class="area-box">
       <h3>Area 1</h3>
      </div>
     </div>
     <div class="col-xs-3">
      <div class="area-box">
       <h3>Area 2</h3>
      </div>
     </div>
     <div class="col-xs-3">
      <div class="area-box">
       <h3>Area 3</h3>
      </div>
     </div>
     <div class="col-xs-3">
      <div class="area-box">
       <h3>Area 4</h3>
      </div>
     </div>
     <div class="col-xs-3">
      <div class="area-box">
       <h3>Area 5</h3>
      </div>
     </div>
     <div class="col-xs-3">
      <div class="area-box">
       <h3>Area 6</h3>
      </div>
     </div>
     <div class="col-xs-3">
      <div class="area-box">
       <h3>Area 7</h3>
      </div>
     </div>
     <div class="col-xs-3">
      <div class="area-box">
       <h3>Area 8</h3>
      </div>
     </div>
     <div class="col-xs-3">
      <div class="area-box">
       <h3>Area 9</h3>
      </div>
     </div>
     <div class="col-xs-3">
      <div class="area-box">
       <h3>Area 10</h3>
      </div>
     </div>
     <div class="col-xs-3">
      <div class="area-box">
       <h3>Area 11</h3>
      </div>
     </div>
     <div class="col-xs-3">
      <div class="area-box">
       <h3>Area 12</h3>
      </div>
     </div>
     <div class="col-xs-3">
      <div class="area-box">
       <h3>Area 13</h3>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

Answer 1

小改动解决了这个问题。设置 accept: ".block-box" 允许 drop 接受任何可拖动对象。

$(function() {
  function makeFirstDrag($el, $s) {
    $el.draggable({
      revert: "invalid",
      stack: $s,
      helper: 'clone'
    });
  }

  function makeSecondDrag($el, $s) {
    $el.draggable({
      revert: "invalid",
      stack: $s,
      helper: 'clone',
      start: function(e, ui) {
        $(this).css("opacity", ".25");
      },
      stop: function(e, ui) {
        $(this).prev().show();
        $(this).remove();
      }
    });
  }
  var blockBoxEle = $('.block-box');
  var blockBoxWd = blockBoxEle.width();
  blockBoxEle.css({
    'width': blockBoxWd
  });
  var blockBoxLen = blockBoxEle.length;
  for (var x = 0; x < blockBoxLen; x++) {
    blockBoxEle.eq(x).addClass('block-count' + (x + 1));
  }

  makeFirstDrag(blockBoxEle, blockBoxEle);
  console.log('blockBoxElements Loaded!!!!!!!');

  var areaBoxEle = $('.area-box');
  var areaBoxLen = areaBoxEle.length;
  for (var y = 0; y < areaBoxLen; y++) {
    areaBoxEle.eq(y).prop('id', 'areaBox' + (y + 1));
  }
  areaBoxEle.droppable({
    accept: ".block-box",
    tolerance: "pointer",
    drop: function(event, ui) {
      var droppable = $(this);
      var draggable = ui.draggable;
      if (droppable.find('.ui-draggable').length) return;
      var dragClass = draggable.attr("class").split(' ')[1];


      var drag = areaBoxEle.has(ui.draggable).length ? draggable : draggable.clone().draggable({
        revert: "invalid",
        stack: blockBoxEle,
        helper: 'clone'
      });
      drag.css("opacity", "1");
      makeSecondDrag(drag, blockBoxEle);

      //droppable.empty();
      droppable.addClass("hiding").hide().after(drag);
      console.log('Dropped block class:' + dragClass + ' on area id:' + this.id);
    }
  });
  console.log('areaBoxElements Loaded!!!!!!!');
});

.block-box,
.area-box {
  margin: 0 0 10px;
  text-align: center;
  position: relative;
}

.block-box {
  padding: 10px 5px;
  border: 2px solid #000;
  background: red;
  color: #fff;
  max-width: 100%;
  min-width: 100%;
  z-index: 2;
}

.area-box {
  padding: 30px 5px;
  border: 2px dashed #333;
  background: #eee;
  z-index: 1;
}

.block-box h3,
.area-box h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

#block-fields .block-box {
  padding-top: 30px;
  padding-bottom: 30px;
}

<link href="https://code.jquery.com/ui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="panel panel-default">
  <div class="panel-body">
    <div class="row">
      <div id="block-panel" class="col-xs-3">
        <div class="row">
          <div class="col-xs-6">
            <div class="block-box">
              <h3>Field 1</h3>
            </div>
          </div>
          <div class="col-xs-6">
            <div class="block-box">
              <h3>Field 2</h3>
            </div>
          </div>
          <div class="col-xs-6">
            <div class="block-box">
              <h3>Field 3</h3>
            </div>
          </div>
          <div class="col-xs-6">
            <div class="block-box">
              <h3>Field 4</h3>
            </div>
          </div>
          <div class="col-xs-6">
            <div class="block-box">
              <h3>Field 5</h3>
            </div>
          </div>
          <div class="col-xs-6">
            <div class="block-box">
              <h3>Field 6</h3>
            </div>
          </div>
          <div class="col-xs-6">
            <div class="block-box">
              <h3>Field 7</h3>
            </div>
          </div>
          <div class="col-xs-6">
            <div class="block-box">
              <h3>Field 8</h3>
            </div>
          </div>
          <div class="col-xs-6">
            <div class="block-box">
              <h3>Field 9</h3>
            </div>
          </div>
          <div class="col-xs-6">
            <div class="block-box">
              <h3>Field 10</h3>
            </div>
          </div>
          <div class="col-xs-6">
            <div class="block-box">
              <h3>Field 11</h3>
            </div>
          </div>
          <div class="col-xs-6">
            <div class="block-box">
              <h3>Field 12</h3>
            </div>
          </div>
          <div class="col-xs-6">
            <div class="block-box">
              <h3>Field 13</h3>
            </div>
          </div>
          <div class="col-xs-6">
            <div class="block-box">
              <h3>Field 14</h3>
            </div>
          </div>
          <div class="col-xs-6">
            <div class="block-box">
              <h3>Field 15</h3>
            </div>
          </div>
        </div>
      </div>
      <div id="block-fields" class="col-xs-9">
        <div class="row">
          <div class="col-xs-3">
            <div class="area-box">
              <h3>Area 1</h3>
            </div>
          </div>
          <div class="col-xs-3">
            <div class="area-box">
              <h3>Area 2</h3>
            </div>
          </div>
          <div class="col-xs-3">
            <div class="area-box">
              <h3>Area 3</h3>
            </div>
          </div>
          <div class="col-xs-3">
            <div class="area-box">
              <h3>Area 4</h3>
            </div>
          </div>
          <div class="col-xs-3">
            <div class="area-box">
              <h3>Area 5</h3>
            </div>
          </div>
          <div class="col-xs-3">
            <div class="area-box">
              <h3>Area 6</h3>
            </div>
          </div>
          <div class="col-xs-3">
            <div class="area-box">
              <h3>Area 7</h3>
            </div>
          </div>
          <div class="col-xs-3">
            <div class="area-box">
              <h3>Area 8</h3>
            </div>
          </div>
          <div class="col-xs-3">
            <div class="area-box">
              <h3>Area 9</h3>
            </div>
          </div>
          <div class="col-xs-3">
            <div class="area-box">
              <h3>Area 10</h3>
            </div>
          </div>
          <div class="col-xs-3">
            <div class="area-box">
              <h3>Area 11</h3>
            </div>
          </div>
          <div class="col-xs-3">
            <div class="area-box">
              <h3>Area 12</h3>
            </div>
          </div>
          <div class="col-xs-3">
            <div class="area-box">
              <h3>Area 13</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

已更新

为可拖动添加了一些 start 和 stop 回调，以帮助模拟您想要的 activity。我也将它们移动到它们自己的函数中，以使其更易于操作。

拖放后再次放下元素

Drop the element again after Drag and Drop

jquery

drag-and-drop

jquery-ui

jquery-ui-draggable

jquery-ui-droppable