JQuery Droppable / Draggable

StackOverflow https://stackoverflow.com/questions/283392

Вопрос

На данный момент у меня есть набор div, динамически генерируемых php, и все они имеют свои идентификаторы, начинающиеся с 'itembox', с добавленным номером счетчика. У меня есть область отбрасываемого мусорного ведра на странице, так что пользователь может удалить отдельный итератор путем fdragging и падения в корзину.

Моя проблема в том, что, по-видимому, буксируемый элемент не будет активироваться, когда я перетаскиваю оригинал, в то время как он будет работать (идеально), когда у меня установлен помощник: «клон». К сожалению, тем не менее, при перетаскивании функция клонирования берет свой клон с первой итерации itembox, независимо от того, какой именно itmbox фактически перетаскивается.

Итак, я ищу решение, чтобы заставить droppable принять оригинал или заставить клонирующую функцию взять свой клон из итератора, который фактически перетащили.

Это было полезно?

Решение

Я полагаю, что проблема должна заключаться в опции accept вашего сбрасываемого инициализатора. Просто попробуйте следующее: 

$('#mydroppable').droppable(
{
    accept: function() { return true; },
    drop: function () { alert("Dropped!"); }
});

Теперь это будет принимать все, поэтому вам, вероятно, следует реализовать некоторую фильтрацию в функции accept, но тем не менее это должно работать.

Другие советы

Вы также можете попробовать приведенное ниже решение. 

<script type="text/javascript">
$(document).ready(function(){
    $('.srcfield').draggable({
        revert: true    
    });

    $('#trash').droppable({
        accept : ".srcfield",
        over: function(){
            $(this).removeClass('out').addClass('over');
        },`enter code here`
        out: function(){
            $(this).removeClass('over').addClass('out');
        },
        drop: function(ev, ui){
            //var answer = confirm('Delete this item?');
            var theTitle = $(ui.draggable).attr("title");
            $(this).html("<u>"+theTitle+"</u><br/> is deleted!");
        }
    });
});
</script>


<body>
    <div id="trash" class="out">
            <span>Trash</span>
    </div>
    <div id="sourcefields">
            <div class="srcfield" title="First Name"><span>First Name</span></div>
            <div class="srcfield" title="Last Name"><span>Last Name</span></div>
            <div class="srcfield" title="Age"><span>Age</span></div>
    </div>
</body>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top