Geek asks and answers

How can I ensure that the draggable elemental clone maintains its original width

I am using jQuery UI Draggable for drag <div>and drop , whose width is calculated as part of the layout ( margin:auto;).

When you drag this item using the helper:cloneclone also gets the style margin:auto;, but is no longer limited to the original container.

Result: the cloned <div>may have a different width than the original.

Fiddle: http://jsfiddle.net/ericjohannsen/ajpVS/1/

How to make a clone keep its original width?

+5
source share
3 answers

, $(ui.draggable).clone().css({ ... });

, . . http://jsfiddle.net/ajpVS/2/

+7

Jon , , draggable. event.target , draggable helper(), :

$(".objectDrag").draggable({
  helper: function(e) {
    var original = $(e.target).hasClass("ui-draggable") ? $(e.target) :  $(e.target).closest(".ui-draggable");
    return original.clone().css({
      width: original.width() // or outerWidth*
    });                
  },
  ...
});

, ( "Drag 1", ). , . , !

* : outerWidth, box-sizing: border-box ( @jave. ).

+14

, , .. :

<div style="width:50px">

objectDrag:

<div class="objectDrag" style="width:50px;margin:auto; color:white;border:black 1px solid; background-color:#00A">Drag me</div>

, , !

EDIT:

http://jsfiddle.net/He2KZ/1/

I used the width: inherit property to inherit the width of the parents no matter what size it has. I also noticed that removing the border fixed the problem. the dragged clone is 2px and you have a 1px border. This is a kind of bug from jQuery-ui IMO, they should consider boundaries at least.

If you really want the borders to try using a "path" instead of a "border". This does not add div width.

+1
source

More articles:


All Articles