wake-up-neo.com

Machen Sie Div mit CSS ziehbar

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

htmlcsshtml5css3
30
Jeet

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;
}

Demo

38
Web_Designer

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.

21
Alvaro

Nur die Verwendung von CSS-Techniken scheint mir nicht möglich. Sie können aber auch jqueryui draggable verwenden:

$('#drag_me').draggable();
13
Dominik Schreiber

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.

8
Quentin

Sie können dies jetzt tun, indem Sie die CSS-Eigenschaft "-webkit-user-drag" verwenden:

HTML:

<div draggable="true" id="drag_me">
    Your draggable content here
</div>

CSS:

#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

4
Alberto Carrasco García

Draggable div not possible only with CSS, wenn Sie Draggable div benötigen, müssen Sie Javascript verwenden.

http://jqueryui.com/draggable/

1
Dhamu
$('#dialog').draggable({ handle: "#tblOverlay" , scroll: false });

    // Pop up Window 
          <div id="dialog">
                        <table  id="tblOverlay">
                            <tr><td></td></tr>
                         <table>
           </div>

Optionen: 

  1. handle: Verhindert das Problem der klebrigen Bildlaufleiste. Manchmal bleibt Ihr Mauszeiger beim Ziehen im Popup-Fenster.
  2. scroll: Verhindert, dass das Popup-Fenster über die übergeordnete Seite oder den aktuellen.
0
kumar chandraketu