jQueryUI Die Position des Draggable-Elements im Container ist nicht korrekt, wird mit CSS skaliert

Question

Ich habe eine div mit ID box-parent, die basierend auf Viewport auf/ab skaliert. Im Inneren sind viele Boxen, die jeweils die sq-box Klasse haben. Wenn ich versuche, diese Boxen zu ziehen, werden ihre Positionen nicht richtig eingestellt. Ich versuche, zwischen Boxen zu wechseln. Gibt es eine Möglichkeit, beim Verschieben der Boxen die richtigen Positionen zu bekommen?

CSS

#box-parent{ 
    border:1px solid black; 
    width:300px; 
    margin:40px auto; 
    font-size:0; 
    transform:scale(1.2); 
} 

.sq-box{ 
    display:inline-block; 
    font-size:20px; 
    height:50px; 
    width:50px; 
    border:1px solid green; 
    background-color:rgba(0,0,0,0.5); 
} 

JavaScript

$(".sq-box").draggable({ 
    appendTo: "#box-parent", 
    helper: "clone", 
    cursor: "move", 
    revert: "invalid" 
}); 

HTML

<div id="box-parent"> 
    <div class="sq-box">1</div> 
    <div class="sq-box">2</div> 
    <div class="sq-box">3</div> 
    <div class="sq-box">4</div> 
    <div class="sq-box">5</div> 
    <div class="sq-box">6</div> 
    <div class="sq-box">1</div> 
    <div class="sq-box">2</div> 
    <div class="sq-box">3</div> 
    <div class="sq-box">4</div> 
    <div class="sq-box">5</div> 
    <div class="sq-box">6</div> 
    <div class="sq-box">1</div> 
    <div class="sq-box">2</div> 
    <div class="sq-box">3</div> 
    <div class="sq-box">4</div> 
    <div class="sq-box">5</div> 
    <div class="sq-box">6</div> 
    <div class="sq-box">1</div> 
    <div class="sq-box">2</div> 
    <div class="sq-box">3</div> 
    <div class="sq-box">4</div> 
    <div class="sq-box">5</div> 
    <div class="sq-box">6</div> 
</div> 

Hier ist ein JSFiddle der Ausgabe - https://jsfiddle.net/mhb35rnr/

Answer 1

Hoffentlich ist näher an wh auf die du gehofft hast. Um zu tun, was Sie wollen, müssen Sie eine draggable mit einer droppable verwenden. Beachten Sie die Hinzufügung von transform-origin und position: absolute zur Problemumgehung eines ziehbaren jQuery-visuellen Artefakts beim Ziehen und Skalieren.

Working JSFiddle

CSS

#box-parent{ 
    border:1px solid black; 
    width:300px; 
    font-size:0; 
    position: absolute; 
    transform-origin:top left; 
    transform:scale(1.2); 
} 

.sq-box{ 
    display:inline-block; 
    font-size:20px; 
    height:50px; 
    width:50px; 
    border:1px solid green; 
    background-color:rgba(0,0,0,0.5); 
} 

.ui-state-hover { 
    background: lightyellow; 
} 

.ui-state-active { 
    background: lightgray; 
} 

JavaScript

jQuery.fn.swap = function(b){ 
    // method from: http://blog.pengoworks.com/index.cfm/2008/9/24/A-quick-and-dirty-swap-method-for-jQuery 
    b = jQuery(b)[0]; 
    var a = this[0]; 
    var t = a.parentNode.insertBefore(document.createTextNode(''), a); 
    b.parentNode.insertBefore(a, b); 
    t.parentNode.insertBefore(b, t); 
    t.parentNode.removeChild(t); 
    return this; 
}; 

$(".sq-box").draggable({ 
    connectToSortable: "#box-parent", 
    cursor: "move", 
    revert: "invalid", 
    helper: "clone" 
}); 

$(".sq-box").droppable({ 
    accept: ".sq-box", 
    activeClass: "ui-state-hover", 
    hoverClass: "ui-state-active", 
    drop: function(event, ui) { 

     var draggable = ui.draggable, droppable = $(this), 
      dragPos = draggable.position(), dropPos = droppable.position(); 

     draggable.css({ 
      left: dropPos.left+'px', 
      top: dropPos.top+'px' 
     }); 

     droppable.css({ 
      left: dragPos.left+'px', 
      top: dragPos.top+'px' 
     }); 
     draggable.swap(droppable); 
    } 
}); 

HTML

<div id="box-parent"> 
    <div class="sq-box">1</div> 
    <div class="sq-box">2</div> 
    <div class="sq-box">3</div> 
    <div class="sq-box">4</div> 
    <div class="sq-box">5</div> 
    <div class="sq-box">6</div> 
    <div class="sq-box">1</div> 
    <div class="sq-box">2</div> 
    <div class="sq-box">3</div> 
    <div class="sq-box">4</div> 
    <div class="sq-box">5</div> 
    <div class="sq-box">6</div> 
    <div class="sq-box">1</div> 
    <div class="sq-box">2</div> 
    <div class="sq-box">3</div> 
    <div class="sq-box">4</div> 
    <div class="sq-box">5</div> 
    <div class="sq-box">6</div> 
    <div class="sq-box">1</div> 
    <div class="sq-box">2</div> 
    <div class="sq-box">3</div> 
    <div class="sq-box">4</div> 
    <div class="sq-box">5</div> 
    <div class="sq-box">6</div> 
</div> 

ich von diesen existing SO answer.