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

【问题标题】：draggable divs lose their "float left" property after they are dropped拖放后可拖动的 div 将失去其“向左浮动”属性
【发布时间】：2018-09-24 11:51:23
【问题描述】：

我有一个 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>

【问题讨论】：

在你的 CSS 中，去掉 div 和 .floatleft 之间的空格（改成 div.floatleft）
您的代码中有一个孤立的关闭</div> 与任何<div> 都不匹配。

标签： jquery html css jquery-ui

【解决方案1】：

问题是您将 p-Tag 拖走，然后将 <div id="origin" class=floatleft></div> 留在上面。当您将其拉回时，您不会将其拉入这些 div 中，因此它们不会应用 float: left css。

我的建议是更改 css：

#parent p{
  float:left;
}

我认为应该这样做

【讨论】：

【解决方案2】：

您的所有建议都很有帮助。谢谢

这对我来说似乎是最好的解决方案：

<style>
    div.floatleft ,.ui-widget-content {
        float:left;
    }
    .clearBoth { 
        clear:both; 
    }
</style>        
   <div id="parent" class="ui-widget ui-state-default floatleft">
        <p>droppable foat left (start position)</p>
        <div id="draggable" class="ui-widget-content">
            <p>draggable 1</p>
        </div>
        <div id="draggable2" class="ui-widget-content">
            <p>draggable 2</p>
        </div>
   </div>

<br class="clearBoth" />

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

【讨论】：

【解决方案3】：

试图清理您的示例：

$(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", "");，它将清除任何小部件添加的样式。

所以我认为解决方法是修复您的 #parent 可丢弃。我会建议类似：

$("#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>

请随时编辑您的帖子或发表评论并进行澄清。希望这会有所帮助。

【讨论】：