Набор Jquery, сбрасываемый на основе асинхронного вызова - PullRequest
Новая
       7

Набор Jquery, сбрасываемый на основе асинхронного вызова

0 голосов
/ 09 мая 2018

Я пытаюсь вызвать метод, чтобы установить, может ли div сбрасываться. Я нашел это JSFiddle на основе некоторого поиска в Google. Как я могу разрешить / запретить удаление на основе результата асинхронности моего кода ниже? Моя цель (пример):

  • div id: перетащить можно в 1 и foo.
  • div id: drag2 можно поместить только в 1.

У меня проблемы с указанием, что это можно поместить только в эти 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>
...