拖放不工作拖放

Question

小提琴是http://jsfiddle.net/5DCZw/970/，我想把我的文本.a，.b，.c，.d拖到可下垂的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是

  $(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",
                });
});
});

小提琴是http://jsfiddle.net/5DCZw/970/

Answer 1

演示

您必须使用have：“无效”属性。

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

可拖曳的div的大小应该比可下垂的div小，这样它们就适合于可下垂的容器中。

<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>

Answer 2

演示

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

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

revert: true将不允许您更改它原来的位置

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

Answer 3

为什么不像这样基本的：

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