Make a div movable but not its child elements

Question

I am trying to make a div movable. The div has child div elements. You can check out the jsfiddle here : http://jsfiddle.net/TsW5F/2/

I want only the container (out most div) to be movable. Currently the inner text is movable without the outer div. The outermost container div should always move along with the rest of the child elements.

    <div id="id">
           <div>second div</div>
           <div>third element</div>
   </div>

$(document).ready(function() {
    var $dragging = null;

    $(document.body).on("mousemove", function(e) {
        if ($dragging) {
            $dragging.offset({
                top: e.pageY,
                left: e.pageX
            });
        }
    });

    $('#id').on("mousedown", null , function (e) {
        $dragging = $(e.target);
    });

    $(document.body).on("mouseup", function (e) {
        $dragging = null;
    });
});

As the inner divs belong to the outer div, they will always be moved along with the outer div ... unless you remove them from inside the div and place them outside of it ... — devnull69, Oct 01 '13 at 08:21
I want to move the inner child elements as well but not without the outer main div.Will edit question to clarify that. — Varun Jain, Oct 01 '13 at 08:22
I need clarification here: Even if you position both the inner divs and the outer div absolute, the inner divs will be placed relative to the outer div. So if you move the outer div, the inner divs will follow. See simple example: http://jsbin.com/olOSahI/1/edit and change the top/left properties for the outer div — devnull69, Oct 01 '13 at 08:46
Oh god ... I see now that the OP has changed the description. He actually wanted the inner divs to move along with the outer one, but not on their own... — devnull69, Oct 01 '13 at 08:47

score 4 · Accepted Answer · answered Oct 01 '13 at 08:22

4

The problem is the line $dragging = $(e.target);, instead use $dragging = $(this);

$(document).ready(function () {
    var $dragging = null;

    $(document.body).on("mousemove", function (e) {
        if ($dragging) {
            $dragging.offset({
                top: e.pageY,
                left: e.pageX
            });
        }
    });

    $('#id').on("mousedown", null, function (e) {
        $dragging = $(this);
    });

    $(document.body).on("mouseup", function (e) {
        $dragging = null;
    });
});

Demo: Fiddle

answered Oct 01 '13 at 08:22

Arun P Johny

384,651
66
527
531

Really neat solution. Would have accepted but TrueBlueAussie was the first one. I hope you don't mind. – Varun Jain Oct 01 '13 at 08:26
+1: Your solution is more elegant. Should have thought of it myself. – iCollect.it Ltd Oct 01 '13 at 08:29
@TrueBlueAussie you can even use `e.currentTarget` – Arun P Johny Oct 01 '13 at 09:02

score 3 · Answer 2 · answered Oct 01 '13 at 08:21

3

Just check in the drag start that it is actually the parent div:

http://jsfiddle.net/TsW5F/4/

$('#id').on("mousedown", null , function (e) {
    if ($('#id').is(e.target))
    {
        $dragging = $(e.target);
    }
});

As Arun P Johny pointed out after $(this) will give the JQuery target and not the mouse target. That means $dragging = $(this) is neater and simpler.

answered Oct 01 '13 at 08:21

iCollect.it Ltd

92,391
25
181
202

2

Works yes, but `$dragging = $(this)` is better. Give it to Arun P Johny. – iCollect.it Ltd Oct 01 '13 at 08:26
Instead, see if you feel this old answer is worth more votes: http://stackoverflow.com/questions/6801546/silverlight-rotate-scale-a-bitmap-image-to-fit-within-rectangle-without-croppi/6802332#6802332 :) – iCollect.it Ltd Oct 01 '13 at 08:30

Make a div movable but not its child elements

2 Answers2

http://jsfiddle.net/TsW5F/4/