How can I make the parent div draggable


Tags: javascript,jquery,css

Problem :

I have a div containing three buttons. The div needs to be draggable, so that you can drag all three buttons around the screen together. That works fine, but the problem is that when I click on of the individual buttons it inherits the draggable id and it is draggable on it's own. I do not want that to happen. So my question is: how do I make my buttons draggable, but make them always stay together and keep them clickable. I added the code below, but here is a JSFiddle: http://jsfiddle.net/2ga50vvt/

So to be clear: the div also needs to be draggable through dragging one of the individual buttons, but then the rest of the div needs to stick with it. Now dragging an individual button only moves the button.

P.S. I do not want to use 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;
}

Update 1

This is a working solution: http://jsfiddle.net/2ga50vvt/3/ However when I click on the div and start dragging the center of the div jumps to my cursor. It works great, but it looks a bit wonky. Is there a way to prevent the div from moving to my cursor?

Your help is most welcome.



Solution :

Use $dragging = $('#draggable'); instead of $dragging = $('e.target');

It will drag div if you try to drag using cursor on button. It will drag #draggable instead of target.

Working Fiddle


    CSS Howto..

    how scrollable text line inside a div without showing scroll bars

    How to Make Hover Background Fade Smoothly In and Out?

    How can I make a Panel change background color while hovering in annotated 7.5 Vaadin?

    how to add a CSS attribute just for specific time via JQuery (revert back to normal after 2 sec)

    Spring, Prime Faces application not showing CSS when deploying to Heroku

    How to make jQuery css affect upcoming elements

    How to change css for active link based on the hashtag

    How to change CSS style of div after onclick method

    How to change the font family of Highchart to Bootstrap css default font family

    How to make an image inside a diamond shape morph to circle

    How can you hide the arrow that is displayed by default on the HTML5
    element in Chrome?

    How can I conditionally assign a color to text in jade

    How to get Style From jQuery in angular2

    How to make a CSS horizontal navigation menu?

    How do you deal with Internet Explorer?

    How to center a paragraph of text on a particular word in HTML, CSS, or JavaScript?

    How to apply this effect to the last line of a text?

    How do I modify a css element with Jquery after appended with Jquery to a div?

    how to make zurb foundation framework off canvas look flat

    Styling Tables - How to use column groups to modify TH tag located in that column

    How to find out an element with id partially matched, and change its css style?

    (Mobile View) How to make UI tabs heading to work as a drop down

    CSS/XHTML: Show div after a specific count of table rows

    Django - how to collapse forms like in the django admin

    How to ensure each DIV appears on it's own without overlapping

    CSS Nav Menu Text rare behaviour in size thats aligned bottom some how

    How do I create a 3 nested stamina bar that will regenerate from last to first

    Make a slide show by fading in background images [closed]

    How to bottom center a span inside a list item

    How do I change the image inside an HTML5 form-validation message?