Jquery根据异步调用设置droppable

时间:2018-05-09 17:04:03

标签: javascript jquery html drag-and-drop

我试图调用一个方法来设置div是否可以删除。我基于一些谷歌搜索找到了这个JSFiddle。如何根据下面代码的异步结果允许/禁止删除?我的目标(例子):

  • div id:拖放可以放入1和foo。
  • div id:drag2只能放入1中。

我无法指定它只能放在那些div中,而不能放在其他div中。

我的代码可以获取可以放入的div。可以返回字符串或其他任何需要的内容:

//TAKES in THE DIV ID
$.getJSON("/Tickets/ChangeCardLane", { id: data }, function (cr) 
 {
if (cr == null) { //droppable==true
}
else{ //droppable==false
}

这里转载的JSFiddle代码(可能有不正确的评论):

//when drop onto div named #floor
$('#floor').droppable({
    tolerance: 'fit'
});

//if drop was a success
$('#drag').draggable({
    revert: 'invalid',
    stop: function(){
        alert("revert invalid: "+$(this).attr('id'));
        $(this).draggable('option','revert','invalid');
    }
});
#other { display:inline-block; width:300px; height:200px; border:1px solid silver; background-color:whitesmoke; padding:10px; }

#drag { display:inline-block; width:80px; height:30px; border:1px solid silver; background-color:white; }

#drag2 { display:inline-block; width:80px; height:30px; border:1px solid silver; background-color:white; }

#floor { display:inline-block; width:100px; height:100px; border:1px solid silver; background-color:yellow; padding:10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
  integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
  crossorigin="anonymous"></script>
  
<div id="drag" class="ui-widget-content" onmousedown="shift('drag')">drag me</div>
<div id="drag2" class="ui-widget-content" onmousedown="shift('drag')">drag me2</div>

<div id="container">
    <div id="floor">foo</div>
    <div id="other">bar</div>
    <div id="other">1</div>
    <div id="other">2</div>

</div>

0 个答案:

没有答案