Question

我有3种不同的jQuery droppable。

<div id="droppable1" class="droppable" style="height: 300px; width: 300px;"></div>
<div id="droppable2" class="droppable" style="height: 300px; width: 300px;"></div>
<div id="droppable3" class="droppable" style="height: 300px; width: 300px;"></div>

 $(".draggable").draggable({
        helper:'clone'
    });

我有一个jQuery draggable，我用

克隆

<div id="draggable" class="drag-box ui-widget-content">
    <p>Drag Me</p>
  </div>

<div id="droppable1" class="droppable" style="height: 300px; width: 300px;">
<div id="draggable" class="drag-box ui-widget-content">
    <p>Drag Me</p>
  </div>
</div>

如果我将我的draggable移动到droppable 1中，我需要能够附加/附加它在droppable 1中创建的克隆，以便它可以读取..

<div id="droppable1" class="droppable" style="height: 300px; width: 300px;">
</div>

<div id="droppable2" class="droppable" style="height: 300px; width: 300px;">
<div id="draggable" class="drag-box ui-widget-content">
    <p>Drag Me</p>
  </div>
</div>

但是，如果我将它从droppable1包含区域移动到droppable2＆＃39; s然后它会在droppable2下移动它，而不是实际上删除该元素当然，就像读取...

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  before_filter :set_locale

  def set_admin_locale
    I18n.locale = :fr
  end

  def default_url_options
    { locale: I18n.locale }
  end

  private
  def set_locale
    I18n.locale = params[:locale] || I18n.default_locale
    Rails.application.routes.default_url_options[:locale]= I18n.locale
  end
end

Answer 1

这是一个例子，我希望它是你想要的。

如果要检查（一旦丢弃）元素是否完全丢弃在容器内，您可以使用this question中的答案。请注意droppable元素为this（在drop回调函数内）

＆＃13;

function setDraggable(el, doClone) {
  el.draggable({
    helper: doClone ? 'clone' : 'original',
    revert: true
  });
}
$(".droppable").droppable({
  accept: ".draggable",
  drop: function( event, ui ) {
    cloned = ui.helper.clone().css({'position': '', 'top': '', 'left': ''});
    setDraggable(cloned, false)
    
    $( this )
    .addClass( "ui-state-highlight" )
    .append(cloned)
    ui.helper.hide();
  }
});
setDraggable($(".draggable"), true);

＆＃13;

.droppable {
  border: 1px solid red;
  float: left;
  margin-left: 10px;
}

.draggable {
  border: 1px solid green;
  padding: 5px;
  margin: 0;
}
.draggable p {
  margin: 0;
  padding: 0;
}

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<div id="droppable1" class="droppable" style="height: 150px; width: 150px;"></div>
<div id="droppable2" class="droppable" style="height: 150px; width: 150px;"></div>
<div id="droppable3" class="droppable" style="height: 150px; width: 150px;"></div>

<br style="clear: both" />
<br />

<div class="draggable">
  <p>Drag Me</p>
</div>

＆＃13;

在示例中，我只隐藏原始拖动的元素如果要从DOM树中完全删除它，可以将ui.helper.hide();更改为ui.helper.remove();

如何将draggable追加到新的可投放区域？

1 个答案: