如何避免将宽度和高度添加到拖动项目中？

Question

当我使用可拖动且可排序时，jQuery总是设置内联风格的宽度和高度，这确实很烦人。

这是我将项目从.structure转移到.sortable的脚本：

$( function()
{
    $( ".sortable" ).sortable();

    $( ".item" ).draggable({
        connectToSortable: ".sortable",
        helper: "clone"
    });
});

这是我的HTML代码

<div class="structure">
    <div class="item">New block</div>
    <div class="item">New headline</div>
</div>

<div class="sortable"></div>

.Item是块元素，当我将它们移至。可容纳它们获得宽度和高度，而不是以宽度：100％传播。这就是.Item拖动后的样子：

<div class="item ui-draggable ui-draggable-handle" style="width: 69.75px; height: 18px;">New block</div>

在这里您可以看到 https：//codepen.io/alphafrau/alphafrau/pen/nwyxmgw

这些设置以及如何避免这种情况。你有什么想法吗？

亲切的问候 彼得

Answer 1

$（this）元素“可排序事件”所指的是指橙色div，其中所有孩子divs中的所有孩子都必须样式。

$(this).children().each(function () {
              $(this).css("width", "100%");
            });

下面的代码中有console.log的事件，以便您意识到发生了什么。

     $(".sortable").sortable({
        start: function () {
          console.log("start sorting");
        },
        stop: function (e) {
          console.log("stop sorting");
          $(this)
            .children()
            .each(function (index) {
              $(this).css("width", "100%");
            });
        },
      });

      $(".item").draggable({
        connectToSortable: ".sortable",
        helper: "clone",
        start: function () {
          //console.log("start drag");
        },
        drag: function () {
          //console.log("dragging");
        },
        stop: function (e) {
          //console.log("stop drag");
        },
      });

      .item {
        background: lime;
        border: 2px solid green;
        padding: 5px;
        margin: 2px;
        width: 100%;
      }

      .sortable {
        background: Orange;
        border: 2px solid OrangeRed;
        padding: 20px;
        margin: 0 0 0 350px;
      }

      .sortable .item1 {
        background: fuchsia;
        border: 2px solid brown;
        padding: 5px;
        margin: 2px;
      }
      .ui-draggable-dragging {
        /*while being dragged*/
        background: hwb(305 0% 0%);
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div class="structure">
      <div class="item">New block</div>
      <div class="item">New headline</div>
    </div>

    <div class="sortable"></div>

Answer 2

使用宽度：100％！重要它可能会为您提供帮助。