CODEWITHSUNDEEP
javascriptjquerycss
larzz11
larzz11

Reputation: 1032

How can I make the parent div draggable

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.

Upvotes: 0

Views: 812

Answers (3)

Michael
Michael

Reputation: 44130

Presuming you're opposed to JQueryUI for it's file size, I'd still recommend a prebuilt solution because why reinvent the wheel?

Draggabilly is a really nifty library that I've used when resource size has been an issue. It's 20k minified (obviously even smaller gzipped) and available on a CDN - which in itself has lots of benefits e.g. caching.

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

There's a few CSS hooks, different options, events etc.

JSFiddle here

Upvotes: 0

ketan
ketan

Reputation: 19341

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

Upvotes: 1

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

You can read the target property of the event and return false to avoid all not #draggable to be draggable.

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

The edited fiddle:

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

It works perfectly, but one suggestion: don't target with ids because with this code you can't drag more of one element (ids must be unique), so the workaround is to write an attribute or a classname and play with it.

Good luck.

Upvotes: 2

Related Questions