How can I avoid width and height to be added to dragged item?-CodePudding

When I use draggable and sortable, jQuery always sets inline-styles for width and height which is really annoying.

This is my script to move items from .structure to .sortable:

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

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

and this is my HTML code

<div >
    <div >New block</div>
    <div >New headline</div>
</div>

<div ></div>

The .item are block elements, when I move them to .sortable they get a width and height instead of spreading at a width: 100%. This is what a .item looks like after dragging:

<div  style="width: 69.75px; height: 18px;">New block</div>

Here you can see that https://codepen.io/alphafrau/pen/NWyXmgw

I have no idea why jQuery adds these settings and how to avoid that. Do you have any ideas?

Kind regards Peter

CodePudding user response：

Use width:100% !important It may help you.

CodePudding user response：

The $(this) element the sortable events act on refers to the orange div with all the child divs in it, you have to style them.

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

There are console.log's and events in the code below for you to realize what's going on.

     $(".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 >
      <div >New block</div>
      <div >New headline</div>
    </div>

    <div ></div>