1

I have a simple Dropzone which accepts Draggables with the class "can_be_dropped". This works fine. But i have a Div with "can_be_dropped" inside another Div that has "can_be_dropped" as the parent.

The Dropzone wont react to the Child Draggable,thats inside a Parentdraggable, if you drop it on the Dropzone.

I created a super simple example Fiddle to show it (i wont get it to react to #itemthree): http://jsfiddle.net/dennismueller/qzyL9/25/

$(".can_be_dragged").draggable();

$("#thedropzone").droppable({
    accept: ".can_be_dropped",
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    tolerance: "touch",
    drop: function (event, ui) {
        alert('You just Dropped #' + $(ui.helper).attr('id'));
    }
});


<div id="thedropzone"></div>
<div class="can_be_dragged can_be_dropped" id="itemone"></div>
<div class="can_be_dragged can_be_dropped" id="itemtwo">
    <div class="can_be_dropped" id="itemthree"></div>
</div>

I know for Dropzones theres this "greedy" option (like solved here: Jquery UI - Nested Droppables/Sortables ), but is there a solution like this available for Draggables? Im really stuck here and happy for any hints/help.

Currently i think it has to be solved by some CSS workarounds. But currently theres no way around for me for #itemthree to be a child of #itemtwo. I would be happy if its just a jquery setting.

Short description of the Problem:

The Droppable doesnt react if i drop #itemthree on it which is a child of #itemtwo

Improve this question
6
  • What behavior do you expect when you drop #itemtwo into #thedropzone? Commented Feb 19, 2014 at 22:13
  • i want the dropzone to react to #itemthree (dropping only the blue/violet part). i just seen i should make that clearer. i will edit the description. #itemone and #itemtwo just react like they should. They trigger the alert in the droppable. Commented Feb 19, 2014 at 22:14
  • Your #itemthree doesn't drag independently of #itemtwo. So you are also dropping #itemtwo when #itemthree is dropped? What alert message do you expect? Commented Feb 19, 2014 at 22:18
  • 1
    This is the situation: #itemone is standalone and does what it should. #itemtwo and #itemthree belong together. no matter which area of any of them is dropped should trigger the event. If there is a way for #itemthree triggering the event for #itemtwo thats also ok. I just need to find a way for the droppable to react to #itemthree touching it (without checking coordinates by myself, which would make the droppable obsolete) Commented Feb 19, 2014 at 22:19
  • The way I interpret the documentation is you need to specify #itemthree as draggable. "The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables)." api.jqueryui.com/droppable Commented Feb 19, 2014 at 23:26
Related questions
4
Cloned jQuery draggable can't be dropped on itself
1
Cannot drop a draggable where two droppables touch each other
11
Jquery UI - Nested Droppables/Sortables
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.