CODEWITHSUNDEEP
jqueryhtml
Nitish Dhawan
Nitish Dhawan

Reputation: 97

Drop not working in drag and drop

fiddle is http://jsfiddle.net/5DCZw/970/ here i want to drag my text which is .a,.b,.c,.d to droppable ans_set1_1.

 <div class="ans_set1_1" style="height:50px; width:50px; border:1px solid black;"></div>



<div class="abcd">
    <div class="a" id="draggable"><b>(a)</b>
    </div>
    <div class="b" id="draggable"><b>(b)</b>
    </div>
    <div class="c" id="draggable"><b>(c)</b>
    </div>
    <div class="d" id="draggable"><b>(d)</b>
    </div>
</div>

jquery is

  $(document).ready(function () {
  $(function () {
    $(".a,.b,.c,.d").draggable({
        revert: true,
        helper: 'clone',
        start: function (event, ui) {
            $(this).fadeTo('fast', 0.5);
        },
        stop: function (event, ui) {
            $(this).fadeTo(0, 1);
        }
    });
    $(".ans_set1_1").droppable({
        accept: ".a,.b,.c,.d",
                });
});
});

fiddle is http://jsfiddle.net/5DCZw/970/

Upvotes: 0

Views: 63

Answers (3)

Haris
Haris

Reputation: 767

Demo

You will have to use revert:"invalid" attribute.

 $(".a,.b,.c,.d").draggable({
        revert:'invalid',
        start: function (event, ui) {
        $(this).fadeTo('fast', 0.5);
    },
    stop: function (event, ui) {
        $(this).fadeTo(0, 1);
    }

And the size of the draggable div's should be smaller than the droppable div, so that they fit in the droppable container.

<div class="ans_set1_1" style="height:50px; width:50px; border:1px solid black;"></div>
<div class="abcd">
<div class="a" id="draggable" style="width:25px;"><b>(a)</b>
</div>
<div class="b" id="draggable" style="width:25px;"><b>(b)</b>
</div>
<div class="c" id="draggable" style="width:25px;"><b>(c)</b>
</div>
<div class="d" id="draggable" style="width:25px;"><b>(d)</b>
</div>
</div>

Upvotes: 2

Gibbs
Gibbs

Reputation: 22964

Demo

$(".a,.b,.c,.d").draggable({

        start: function (event, ui) {
            $(this).fadeTo('fast', 0.5);
        },
        stop: function (event, ui) {
            $(this).fadeTo(0, 1);
        }
    });

revert: true will not allow you to change it's original position

// check for draggable
        if (//isnot that box) {
            $(this).data('rejected', true);
        }

Upvotes: 0

user3720516
user3720516

Reputation:

Why not something basic like this:

  $(function() {
    $(".a,.b,.c,.d").draggable();
    $(".ans_set1_1,.ans_set1_2,.ans_set1_3,.ans_set1_4").droppable({
      drop: function( event, ui ) {;
      }
    });
  });

Upvotes: 0

Related Questions