Jquery перетащить и получить значение пользовательских атрибутов на событие перетаскивания

0

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

Когда капля завершена, она всегда получает значение от первого изображения в группе изображений, независимо от того, какое изображение я перетаскиваю.

Я создал JSFIDDLE, чтобы лучше показать свою проблему.


Любая помощь будет большой. Благодаря :)

Вот часть html: (полный код в JSFiddle)

 <div id="images">
<img draggable="true" src="http://i.imgur.com/q9aLMza.png" width="70" height="90"></img>
<div class="hiddenInfo" data-id="1"></div>
<div class="hiddenInfo" data-hiddenCrap="blah blah"></div>
<div class="hiddenInfo" data-hiddenRubbish="bleh bleh"></div>  
 </div>

<div id="images">
<img draggable="true" src="http://i.imgur.com/4YgjsPL.jpg" width="70" height="90"></img>
<div class="hiddenInfo" data-id="2"></div>
<div class="hiddenInfo" data-hiddenCrap="blah blah"></div>
<div class="hiddenInfo" data-hiddenRubbish="bleh bleh"></div>  
</div>

Вот капля части кода jquery: (Полный код находится в JSFIDDLE)
для тестирования я просто пытаюсь создать предупреждение с правильным ID.

 function handleDrop(e) {
 // this / e.target is current target element.
    e.preventDefault();
      if (e.stopPropagation) {
          e.stopPropagation(); // stops the browser from redirecting.
         }

       var img = document.querySelector('#images img.img_dragging');

        console.log('event: ', e);

        var newImage = new fabric.Image(img, {
             width: img.width,
             height: img.height,
      // Set the center of the new object based on the event coordinates relative
        // to the canvas container.
             left: e.layerX,
              top: e.layerY
                });
            canvas.add(newImage);

        var dropId = $('.hiddenInfo').data('id');
                alert(dropId);

        var dropId2 = $(this).closest('#images').find('.hiddenInfo').data('id');
               alert(dropId2);


       return false;
           }
Теги:

1 ответ

0
Лучший ответ

Решение здесь: http://jsfiddle.net/wN29y/8/

Проблемы были:

Дублировать идентификаторы для #images - изменено на класс

Выбор элемента и атрибута изменился на:

var dropId = $(img).next('.hiddenInfo').data('id');
            alert(dropId);
  • 0
    Имеет смысл, спасибо за помощь ... Могу ли я быть немного дерзким и задать еще один вопрос. Как выбрать данные для data-hiddenRubbish или data-hiddenCrap?
  • 0
    Нет проблем - используйте: nth-child или дайте им свое собственное имя класса
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню