Kann nicht auf alle Bereiche eines divs fallen, das von CSS umgewandelt wurde

Question

Ich versuche eine Drag & Drop-Funktion zu entwickeln. Das Drop-Div-Element wird durch CSS transformiert. Der ziehbare Div wird nicht auf die angezeigte Box fallen gelassen, er fällt einfach links neben und in der Mitte der Box, fällt aber nicht auf den rechten Teil der Box.

Hier ist eine einfache Version des Code der Seite, sowie eine jsFiddle: https://jsfiddle.net/t5e2qvgt/8/

$("#draggable").draggable(); 
 
$("#droppable").droppable({ 
 
    drop: function(event, ui) { 
 
    $(this) 
 
     .addClass("ui-state-highlight") 
 
     .find("span") 
 
     .html("Dropped!"); 
 
    } 
 
});

#draggable { 
 
    width: 50px; 
 
    height: 50px; 
 
    padding: 0.5em; 
 
    float: left; 
 
    margin: 10px 10px 10px 0; 
 
} 
 

 
#droppable { 
 
    width: 150px; 
 
    height: 150px; 
 
    padding: 0.5em; 
 
    float: right; 
 
    margin: 10px; 
 
} 
 

 
.droptarget { 
 
    -webkit-transform-origin: 100% 100%; 
 
    transform-origin: 100% 100%; 
 
    -moz-transform: skew(45deg, 0); 
 
    -ms-transform: skew(45deg, 0); 
 
    -o-transform: skew(45deg, 0); 
 
    -webkit-transform: skew(45deg, 0); 
 
    transform: skew(45deg, 0); 
 
} 
 

 
.droptargeticon { 
 
    -moz-transform: skew(-45deg, 0); 
 
    -ms-transform: skew(-45deg, 0); 
 
    -o-transform: skew(-45deg, 0); 
 
    -webkit-transform: skew(-45deg, 0); 
 
    transform: skew(-45deg, 0); 
 
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/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.11.4/jquery-ui.js"></script> 
 

 
<div id="droppable" class="droptarget ui-widget-header"> 
 
    <div class="droptargeticon"> 
 
    <p>Drop here</p> 
 
    </div> 
 
</div> 
 
<div id="draggable" class="ui-widget-content"> 
 
    <p>Drag</p> 
 
</div>

Answer 1

wie sieht eine schlechte Implementierung der Content-Box des Elements mit Skew in der transformiert wird, Browser. Sie gehen davon aus, dass der Browser die neue transformierte Kontextbox versteht, die ID jedoch nicht.

$('#droppable').outerWidth() // 189 

klar, dass die Breite größer ist als 189, in der Tat 189 ist die Breite des Elements withouth der Skew-Transformation

Die Position

// With transform 
$('#droppable').position(); // { top: 0, left: 189 } 

// Without transform 
$('#droppable').position(); // { top: 0, left: 357 } 

geändert ist

All die Transformierte scheint mit der content-box im DOM zu tun ist, ändern Sie die Position in der oberen linken Ecke des verzerrten Elements, nichts e lse, also stellt es nicht die Form des Elements dar, das du siehst.

Dies ist wahrscheinlich eine Einschränkung im Browser und das DOM, die Sie :(

zu beheben

Mit rohen JavaScript anstelle von jQuery hat die gleichen Ergebnisse nicht in der Lage sein, so dass es nicht jQuery ist.

Sie könnten versuchen, einen Wrapper als abwerfbaren zu verwenden, und das schiefe Element nach innen setzen, aber der abwerfbaren Bereich wird ein größerer Platz sein.

EDIT

ich dies tatsächlich berichten als ein Fehler zu Chromium, können Sie die discussion sehen. Sie haben mir gesagt, ich solle es beim W3C beantragen, damit es standardisiert wird und wir es in allen Browsern bekommen. Ich gehe nicht so weit, fühle mich frei, es selbst zu tun.