CODEWITHSUNDEEP
jqueryjquery-uidraggabledroppable
MBguitarburst
MBguitarburst

Reputation: 277

Jquery .out() remove droppable class only if all draggables are removed

I have 4 draggable options and 3 droppable buckets. When I drag an option to a droppable, the draggable takes on the value of the bucket. The droppable also takes on the class '.dropped'. 2 things I need:

  1. When the draggable is removed from the bucket it looses the value
  2. When all draggables are removed from a droppable, it looses the '.dropped' class

The problem I'm having is that the ui param in .out(event,ui) is empty (per http://api.jqueryui.com/droppable/#event-out) so I can't really grab any info from it to update the draggable value or count the number of draggables inside the droppable.

I've considered using a counter but there are 3 different droppables. Any advice?

HTML:

<div class="row-fluid">
    <div class="drag-option span1 draggable" id="option1">Option 1</div>
    <div class="span2"></div>
    <div class="drag-option span1 draggable" id="option2">Option 2</div>
    <div class="span2"></div>
    <div class="drag-option span1 draggable" id="option3">Option 3</div>
    <div class="span2"></div>
    <div class="drag-option span1 draggable" id="option4">Option 4</div>
</div>
<div class="row-fluid">
    <div class="drop-option droppable span4" value="1">1</div>
    <div class="drop-option droppable span4" value="2">2</div>
    <div class="drop-option droppable span4" value="3">3</div>
</div>

jQuery 

// Drag Drop functions
$('.draggable').draggable({containment: "#drag-radio"}).css('cursor','move');
$('.droppable').droppable({
    accept: ".drag-option",
    hoverClass: "drop-hover",
    // Make the drag option inherit the drop value
    drop: function(event,ui){
        ui.draggable.attr('value',$(this).attr('value'));
        $(this).addClass('dropped');

    },
    // Remove draggable value and droppable .dropped class
    out: function(event,ui){
        ui.draggable.attr('value','');
        $(this).removeClass('dropped');
    }
});

Upvotes: 1

Views: 2490

Answers (2)

Barmar
Barmar

Reputation: 781068

Try this:\

HTML:

<div class="row-fluid">
    <div class="drag-option span1 draggable" id="option1">Option 1</div>
    <div class="span2"></div>
    <div class="drag-option span1 draggable" id="option2">Option 2</div>
    <div class="span2"></div>
    <div class="drag-option span1 draggable" id="option3">Option 3</div>
    <div class="span2"></div>
    <div class="drag-option span1 draggable" id="option4">Option 4</div>
</div>
<div class="row-fluid">
    <div class="drop-option droppable span4" data-value="1" readonly>1</div>
    <div class="drop-option droppable span4" data-value="2" readonly>2</div>
    <div class="drop-option droppable span4" data-value="3" readonly>3</div>
</div>

JS:

$('.draggable').draggable({
    containment: "#drag-radio"
}).css('cursor', 'move');
$('.droppable').droppable({
    accept: ".drag-option",
    hoverClass: "drop-hover",
    // Make the drag option inherit the drop value
    drop: function (event, ui) {
        ui.draggable.data('value', $(this).data('value'));
        alert(ui.draggable.data('value'));
        $(this).addClass('dropped');
    },
    // Remove draggable value and droppable .dropped class
    out: function (event, ui) {
        $(".draggable[data-value=" + $(this).data('value') + "]").data('value', '');
        $(this).removeClass('dropped');
    }
});

It uses a dataset attribute instead of the nonstandard value attribute. Then it uses a selector that matches on the dataset attribute to find the draggable that was removed, since there's no ui parameter to say which it was.

FIDDLE

Upvotes: 0

Tricky12
Tricky12

Reputation: 6822

EDIT: I probably mislead you some. The problem is that you are using value inside of 'div' tags. Div tags DO NOT have a value attribute, so that is why it is undefined. You need to change these to something else that can hold a value attribute.

W3C specs

Here is a new working JSFiddle, using input tags instead of divs. I made them readonly so that they cannot be typed into. It probably isn't your ideal solution, but I wanted to show you that you are doing things correctly, just that the div does not use the value attribute.

http://jsfiddle.net/cFcup/5/

Upvotes: 0

Related Questions