时间戳

首页 > 解决方案 > 拖放后可拖动的 div 将失去其“向左浮动”属性

jquery - 拖放后可拖动的 div 将失去其“向左浮动”属性

问题描述

我有一个 jquery 示例，可拖动的 div 在起始位置“向左浮动”（= 刷新谷歌浏览器）。当我将它们拖到任何可放置的 div 时，“向左浮动”就永远消失了。

我的目标是，可拖动的 div 应始终在起始位置具有“向左浮动”。在其他可放置的 div 上，它们可以有任何浮动对齐，没关系。

我怎么解决这个问题？

$(function() {
        $(".ui-widget-content").draggable({
            revertDuration : 100,
            revert : function(event, ui) {
                $(this).data("uiDraggable").originalPosition = {
                    top : 0,
                    left : 0
                };
                return !event;
            }
        });
        $("#droppable").droppable({
            drop: function(ev, ui) {
                $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
            }
        });
        $("#parent").droppable({
            drop: function(ev, ui) {
                $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
            }
        });
    });

    <style>
        div .floatleft {
            float:left;
        }
        .clearBoth { 
            clear:both; 
        }

    </style>
    </head>

    <!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
  rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"> 
   </script>

   </head>

   <body>
   <div id="parent" class="ui-widget ui-state-default">
        <p>droppable foat left (start position)</p>
       <div id="origin" class="floatleft">
           <div id="draggable" class="ui-widget-content">
               <p>draggable 1</p>
           </div>
       </div>
       <div id="origin2" class="floatleft">
               <div id="draggable2" class="ui-widget-content">
                   <p>draggable 2</p>
               </div>
           </div>
       </div>
   </div>

   <br class="clearBoth" />

   <div id="droppable" class="ui-widget-header">
        <p>other droppable</p>
   </div>

   </body>
</html>

标签： jqueryhtmlcssjquery-ui

解决方案

试图清理你的例子：

$(function() {
  $(".ui-widget-content").draggable({
    revertDuration: 100,
    revert: function(event, ui) {
      $(this).data("uiDraggable").originalPosition = {
        top: 0,
        left: 0
      };
      return !event;
    }
  });
  $("#droppable").droppable({
    drop: function(ev, ui) {
      $(ui.draggable).detach().css({
        top: 0,
        left: 0
      }).appendTo(this);
    }
  });
  $("#parent").droppable({
    drop: function(ev, ui) {
      $(ui.draggable).detach().css({
        top: 0,
        left: 0
      }).appendTo(this);
    }
  });
});
.floatleft {
  float: left;
}

.clearBoth {
  clear: both;
}
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>

<div id="parent" class="ui-widget ui-state-default">
  <p>droppable float left (start position)</p>
  <div id="origin-1" class="floatleft">
    <div id="draggable" class="ui-widget-content">
      <p>draggable 1</p>
    </div>
  </div>
  <div id="origin-2" class="floatleft">
    <div id="draggable2" class="ui-widget-content">
      <p>draggable 2</p>
    </div>
  </div>
</div>

<br class="clearBoth" />

<div id="droppable" class="ui-widget-header">
  <p>other droppable</p>
</div>

这允许干净的拖放。您的 Droppable 中存在问题。基本上，你为任何被丢弃的东西分配相同的top和。left这将导致所有物品彼此重叠，无论它们的浮动状态如何。

目前尚不清楚，但我认为当一个项目被放到#droppable你希望它是一个块，但是当你把它放回#parent你希望它是内联块（所以它不是一个大块）。

Draggables 需要记住的一点是，它们使用元素样式来管理位置，这通常会覆盖您的 CSS。一个方便的技巧是$(ui.droppable).attr("style", "");清除任何小部件添加的样式。

所以我认为修复是修复你的#parentdroppable。我会建议类似：

$("#parent").droppable({
  drop: function(ev, ui) {
    $(ui.draggable)
      .attr("style", "")
      .detach()
      .appendTo(this);
  }
});

这不会将元素放回origin元素之一。它将它附加到#parent. 同样，您的帖子并不清楚您希望在这里发生什么。所以这添加了元素，它仍然向左浮动，但它也试图阻止。

$(function() {
  $(".ui-widget-content").draggable({
    revertDuration: 100,
    revert: function(event, ui) {
      $(this).data("uiDraggable").originalPosition = {
        top: 0,
        left: 0
      };
      return !event;
    }
  });
  $("#droppable").droppable({
    drop: function(ev, ui) {
      $(ui.draggable).detach().css({
        top: 0,
        left: 0
      }).appendTo(this);
    }
  });
  $("#parent").droppable({
    drop: function(ev, ui) {
      $(ui.draggable)
        .attr("style", "")
        .detach()
        .appendTo(this);
    }
  });
});
.floatleft {
  float: left;
}

.clearBoth {
  clear: both;
}
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>

<div id="parent" class="ui-widget ui-state-default">
  <p>droppable float left (start position)</p>
  <div id="origin-1" class="floatleft">
    <div id="draggable" class="ui-widget-content">
      <p>draggable 1</p>
    </div>
  </div>
  <div id="origin-2" class="floatleft">
    <div id="draggable2" class="ui-widget-content">
      <p>draggable 2</p>
    </div>
  </div>
</div>

<br class="clearBoth" />

<div id="droppable" class="ui-widget-header">
  <p>other droppable</p>
</div>

随意编辑您的帖子或评论并进行一些澄清。希望这可以帮助。

推荐阅读