Question

我有一个jquery例子，可拖动的div在开始位置是“向左浮动”（=刷新Google Chrome）。当我将它们拖到任何可放置的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>

Answer 1

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

我的建议是更改CSS：

#parent p{
  float:left;
}

我认为应该这样做

Answer 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>

Answer 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>

可以自由编辑您的帖子或评论，并进行一些澄清。希望这会有所帮助。

可拖动的div删除后将失去其“向左浮动”属性

3 个答案: