Question

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

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

Demo

您必须使用revert：“invalid”属性。

 $(".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的大小应小于droppable 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

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将不允许您更改其原始位置

// 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 ) {;
      }
    });
  });

拖放不起作用

3 个答案: