Ich möchte, dass mein div-Tag mit der ID "drag_me" auf die Länge von 300px von links und 460px von oben gezogen werden kann, nur mit CSS.
Ich möchte es auch in der Größe verändern. Wieder dieselbe Bedingung wie oben, d. H. Kein Javascript oder keine Jquery.
Kann jemand die Lösung dafür vorschlagen ...
Vielen Dank im Voraus an alle
Dies ist das Beste, was Sie ohne JS tun können:
HTML:
<div draggable="true" class="resizable"></div>
CSS:
[draggable=true] {
cursor: move;
}
.resizable {
overflow: scroll;
resize: both;
max-width: 300px;
max-height: 460px;
}
Sie können einen Blick auf HTML 5 werfen, aber ich denke nicht, dass Sie den Bereich einschränken können, in den Sie ihn ziehen können, nur das Ziel:
http://www.w3schools.com/html/html5_draganddrop.asp
Und wenn es Ihnen nichts ausmacht, eine großartige Bibliothek zu verwenden, würde ich Sie dazu ermutigen, Dragula zu versuchen.
Nur die Verwendung von CSS-Techniken scheint mir nicht möglich. Sie können aber auch jqueryui draggable verwenden:
$('#drag_me').draggable();
CSS beschreibt die Darstellung von Dokumenten. Es verfügt über einige Funktionen zum Ändern dieser Präsentation als Reaktion auf Benutzerinteraktion (vor allem :hover
, um anzuzeigen, dass Sie jetzt auf etwas Interaktives zeigen).
Etwas schleppbar machen ist keine einfache Frage der Präsentation. Es ist fest im Bereich der Interaktivitätslogik, die von JavaScript behandelt wird.
Was Sie wollen, ist nicht erreichbar.
Sie können dies jetzt tun, indem Sie die CSS-Eigenschaft "-webkit-user-drag" verwenden:
<div draggable="true" id="drag_me">
Your draggable content here
</div>
#drag_me{
-webkit-user-drag: element;
}
Wird nur von Webkit-Browsern wie Safari oder Chrome unterstützt, ist jedoch ein guter Ansatz, um nur CSS zu verwenden.
Das ziehbare HTML5-Attribut wird nur festgelegt, um sicherzustellen, dass es für andere Browser funktioniert.
Weitere Informationen finden Sie hier: http://help.dottoro.com/lcbixvwm.php
Draggable div not possible only with CSS
, wenn Sie Draggable div benötigen, müssen Sie Javascript verwenden.
$('#dialog').draggable({ handle: "#tblOverlay" , scroll: false });
// Pop up Window
<div id="dialog">
<table id="tblOverlay">
<tr><td></td></tr>
<table>
</div>
Optionen: