jQuery draggables - получить идентификатор перетаскиваемого - PullRequest
Новая
       1

jQuery draggables - получить идентификатор перетаскиваемого

1 голос
/ 28 мая 2011

Решение найдено! Я нашел его, я упустил из виду, что могу просто получить идентификатор переменной item.Поэтому я поставил var item_id = item.attr('id');, и это было мое решение.Намного проще, чем я думал.Спасибо всем за помощь!

Хорошо, у меня есть несколько перетаскиваемых элементов в jQuery, все они являются изображениями, но у каждого есть свой идентификатор.Во всяком случае, я настроил функцию, которая предварительно формируется после того, как изображение сбрасывается на предмет сброса.Я хочу иметь возможность получить идентификатор изображения, чтобы я мог обработать, какое изображение было отброшено в моей базе данных. 

function foundationsInSpot(drag_item,spot)
{
var oldSpotItem = $(spot).find('img');
if(oldSpotItem.length>0) {
    oldSpotItem.appendTo('#foundationinv').draggable({ revert: 'invalid' });
}
var item = $('<img />');
var item_id = "";
var bid = "<?= $bid ?>";
item.attr('src',drag_item.attr('src')).attr('id',drag_item.attr('id')).attr('class',drag_item.attr('class')).appendTo(spot).draggable({ revert: 'invalid' });
drag_item.remove();
alert('BenID: ' + bid + ' Foundation: ' + item_id);
var dataString = 'item_id='+ item_id + '&bid=' + bid;  
    $.ajax({
        type: "POST",
        data: dataString,
        url: "http://motb.isgreat.org/objects/pfoundations.php",
    });
}

Итак, это мой код.Мне нужно найти item_id.Вот мое предположение var item_id = $('<img />').attr('id');, но оно вернуло пустую информацию.Я также попробовал var item_id = ui.draggable.attr("id");, и это просто остановило мою функцию.Есть идеи?Заранее спасибо.

Кстати, вот как выглядят мои перетаскиваемые предметы.<img src='http://motb.isgreat.org/objects/khhhqw4s.png' class='object foundation' id='khhhqw4s'/>

ОБНОВЛЕНИЕ Я переместил var item_id = ui.draggable.attr("id"); над оператором if, и теперь я получаю undefined.Поэтому я не уверен, куда идти, но я знаю, что мой вызов AJAX работает правильно, так как он обновляет мою базу данных с помощью undefined.

ОБНОВЛЕНИЕ - снова

Итак, вот как я называю свою функцию, если это облегчает задачу. 

    $(".foundations").draggable({ revert: 'invalid'}).addTouch;
$('#foundationinv').droppable({accept: '.foundations'});
$("#foundations").droppable({ accept: '.foundations'})
$('#foundations,#foundationinv').bind('drop', function(ev,ui) { foundationsInSpot(ui.draggable,this); });

Я никогда не делал ничего подобного раньше, так что это действительно вне меня.Если вы хотите лично увидеть страницу, перейдите на http://motb.isgreat.org/, нажмите кнопку входа в систему и используйте testbot как для имени пользователя, так и для пароля.Чтобы увидеть, где находятся перетаскиваемые объекты, с левой стороны есть большая коробка с четырьмя меньшими под ней, щелкните над маленькой рамкой, где слово является основой.Я пытаюсь перетащить те объекты, которые появляются в маленькую коробочку.Вы можете увидеть предупреждение с информацией, которую я пытаюсь передать.Не стесняйтесь проверять мой источник на предмет каких-либо проблем, элементы вызываются из моей базы данных, поэтому мой PHP, вероятно, отсутствует в вашем источнике.идентификатор элемента переменной.Поэтому я поставил var item_id = item.attr('id');, и это было мое решение.Намного проще, чем я думал.Спасибо всем за помощь!

1 Ответ

6 голосов
/ 28 мая 2011

внутри droppable у вас есть свойство под названием drop

$("#destination").droppable({
   hoverClass: 'ui-state-hover',        
   helper: 'clone',        
   cursor: 'move',        
   drop: function(event, ui) {            
       $(this).addClass('ui-state-highlight');
       $(ui.draggable).addClass('ui-state-highlight');     
       $(ui.draggable).draggable('disable');

       console.log('Dragged: ' + $(ui.draggable).attr("id"));
   }    
});

используйте этот метод для вызова объекта, который был отброшен, вызывая $(ui.draggable).attr("id")

если вы видите объект, ui.draggable - это только HTML, вскоре вы оберните его $(), и вы сможете выполнять с ним любую операцию jQuery.

http://jsbin.com/iboli4/edit

открыть Консоль в Инспекторе, чтобы увидеть идентификаторы

...