web-dev-qa-db-fra.com

Rendre Div Dragable en utilisant CSS

Je veux que ma balise div avec l'id "drag_me" puisse être déplacée jusqu'à une longueur de 300 pixels de gauche et de 460 pixels de haut, uniquement à l'aide de CSS.

Je veux aussi le rendre redimensionnable. Encore une fois, même condition que ci-dessus, c’est-à-dire pas de Javascript ou jquery.

Quelqu'un peut-il suggérer la solution pour cela ...

Merci d'avance à tous

htmlcsshtml5css3
30
Jeet

C'est le mieux que vous puissiez faire sans JS:

HTML:

<div draggable="true" class="resizable"></div>

CSS:

[draggable=true] {
    cursor: move;
}

.resizable {
    overflow: scroll;
    resize: both;
    max-width: 300px;
    max-height: 460px;
}

Démo

38
Web_Designer

Vous pouvez jeter un coup d'oeil au HTML 5, mais je ne pense pas que vous puissiez restreindre la zone à l'intérieur, vous pouvez le faire glisser, seulement la destination:

http://www.w3schools.com/html/html5_draganddrop.asp

Et si cela ne vous dérange pas d'utiliser une bibliothèque géniale, je vous encourage à essayer Dragula .

21
Alvaro

Cela ne me semble pas possible d’utiliser des techniques de CSS. Mais vous pouvez utiliser jqueryui draggable :

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

CSS est conçu pour décrire la présentation de documents. Il comporte quelques fonctionnalités permettant de modifier cette présentation en réponse aux interactions de l'utilisateur (principalement :hover pour indiquer que vous pointez maintenant sur un élément interactif). 

Faire quelque chose de glissable n'est pas une simple question de présentation. Il est fermement sur le territoire de la logique d'interactivité, gérée par JavaScript.

Ce que vous voulez n'est pas réalisable.

8
Quentin

Vous pouvez le faire maintenant en utilisant la propriété CSS "-webkit-user-drag":

HTML:

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

CSS:

#drag_me{
    -webkit-user-drag: element;
}

N’est supporté que par les navigateurs Webkit, tels que Safari ou Chrome, mais c’est une bonne approche pour le faire fonctionner avec CSS uniquement.

L'attribut HTML5 déplaçable est uniquement défini pour garantir son fonctionnement sur les autres navigateurs.

Vous pouvez trouver plus d'informations ici: http://help.dottoro.com/lcbixvwm.php

4
Alberto Carrasco García

Draggable div not possible only with CSS, si vous voulez div glissable, vous devez utiliser javascript.

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>

Options: 

  1. handle: évite le problème de la barre de défilement adhésive. Parfois, le pointeur de votre souris va coller à la fenêtre contextuelle tout en faisant glisser.
  2. scroll: empêche la fenêtre contextuelle d’aller au-delà de la page parente ou de quitter l’écran actuel
0
kumar chandraketu