Comment faire pour que la div parent soit draggable

Question

J'ai une div contenant trois boutons. Le div doit être déplaçable, de sorte que vous puissiez faire glisser les trois boutons autour de l'écran ensemble. Cela fonctionne bien, mais le problème est que lorsque je clique sur les boutons individuels, il hérite de l'identifiant déplaçable et il est déplaçable par lui-même. Je ne veux pas que ça arrive. Donc ma question est: comment faire glisser mes boutons, mais les faire toujours rester ensemble et les garder cliquables. J'ai ajouté le code ci-dessous, mais voici un jsFiddle: http://jsfiddle.net/2ga50vvt/

Donc, pour être clair: la div doit également être draggable par glisser l'un des boutons individuels, mais le reste de la div doit tenir à il. Maintenant, en faisant glisser un bouton individuel, vous déplacez le bouton.

P.S. Je ne veux pas utiliser JQuery UI

HTML:

<div id="draggable" class="ui-widget-content"> 
    <button ng-click="menu.shown = !menu.shown">MENU</button> 
    <br> 
    <button ng-click="disconnect()">CLOSE</button> 
    <br> 
    <button ng-click="">KEYS</button> 
</div> 

JS

$(document).ready(function() { 
    var $dragging = null; 
    $('body').on("mousedown", "#draggable", function(e) { 
    $(this).attr('unselectable', 'on').addClass('dragged'); 
    var el_w = $('.dragged').outerWidth(), 
     el_h = $('.dragged').outerHeight(); 
    $('body').on("mousemove", function(e) { 
     if ($dragging) { 
     $dragging.offset({ 
      top: e.pageY - el_h/2, 
      left: e.pageX - el_w/2 
     }); 
     } 
    }); 
    $dragging = $(e.target); 
    }).on("mouseup", ".dragged", function(e) { 
    $dragging = null; 
    $(this).removeAttr('unselectable').removeClass('dragged'); 
    }); 
}); 

CSS:

body { 
    padding: 50px; 
} 

.dragged { 
    background-color: yellow; 
} 

#draggable { 
    position: fixed; 
    width: 150px; 
    height 150px; 
    padding: 0.5em; 
    background: red; 
    background-color: black; 
    z-index: 1000; 
    cursor: move; 
    float: left; 
} 

Mise à jour 1

Ceci est une solution de travail: http://jsfiddle.net/2ga50vvt/3/ Cependant, lorsque je clique sur le div et commencez à faire glisser le centre de la div saute à mon curseur. Ca marche super, mais ça a l'air un peu bancal. Y at-il un moyen d'empêcher le div de se déplacer vers mon curseur?

Votre aide est la bienvenue.

Answer 1

Utilisation $dragging = $('#draggable'); au lieu de $dragging = $('e.target');

Il traînera div si vous essayez de faire glisser l'aide du curseur sur le bouton. Il fera glisser #draggable au lieu de la cible.

Working Fiddle

Answer 2

Vous pouvez lire la propriété target de l'événement et return false pour éviter que tous les éléments #draggable ne soient déplacés.

if(e.target.id !== "draggable") { 
    return false; 
} 

Le violon édité:

http://jsfiddle.net/2ga50vvt/1/

Il fonctionne parfaitement, mais une suggestion: ne cible pas ids car avec ce code, vous ne pouvez pas glisser plus d'un élément (ids doit être unique), donc la solution consiste à écrire un attribut ou un nom de classe et jouer avec.

Bonne chance.

Answer 3

En supposant que vous soyez opposé à JQueryUI pour sa taille de fichier, je recommanderais quand même une solution prédéfinie car pourquoi réinventer la roue?

Draggabilly est une bibliothèque très pratique que j'ai utilisée lorsque la taille des ressources a été un problème. Il est 20k minifié (évidemment plus petit gzipped) et disponible sur un CDN - qui en soi a beaucoup d'avantages, par exemple. mise en cache

$(function() { 
    $("#draggable").draggabilly(); 
}); 

Il y a quelques crochets CSS, différentes options, événements, etc.

JSFiddle here