Я создаю создателя настроения, я столкнулся с проблемой при попытке скопировать значения из пользовательских атрибутов выбранного изображения в новый 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;
}
Решение здесь: http://jsfiddle.net/wN29y/8/
Проблемы были:
Дублировать идентификаторы для #images - изменено на класс
Выбор элемента и атрибута изменился на:
var dropId = $(img).next('.hiddenInfo').data('id');
alert(dropId);