我在尝试使用一些拖放元素上的sortable从JS中获取数组时遇到问题。
可以在以下位置找到有效的演示：
Example
我需要实现的目标：
将图片拖到图片上，获取x，y（完成）
放置所有项目后，使用jQuery sortable吗？获取具有x，y坐标的id的数组。
数组（23456-> {xpos：234，ypos：234}，23456-> {xpos：234，ypos：234}，.... etc
我不确定如何将可排序对象绑定到仅放在图像上的项目，然后将这些值放入数组中
这是到目前为止的代码：
jQuery(function($){
$('.dragThis').bind('click', function(){
$(this).css("border","3px solid #fff");
$(this).draggable({
containment: $('body'),
drag: function(){
$('#dropHere').droppable({
accept: '.dragThis',
over : function(){
$(this).animate({'border-width' : '3px', 'border-color' : '#0f0'}, 500);
}
});
},
stop: function(){
var position = $(this).position();
var parentPos = $('#dropHere').offset();
var xPos = position.left - parentPos.left;
var yPos = position.top - parentPos.top;
var finalOffset = $(this).position();
var finalxPos = xPos;
var finalyPos = yPos;
$('#finalX').text('Final X: ' + finalxPos);
$('#finalY').text('Final Y: ' + finalyPos);
//$('.dragThis').sortable();
console.log (finalxPos,finalyPos,$(this).attr("id"));
},
revert: 'invalid'
//connectToSortable: '#dropHere'
});
});
});
非常感谢您指出正确方向的任何帮助。
为了澄清起见，我将通过AJAX将值写入数据库，以供稍后调用。
提前致谢
最佳答案
简单的解决方案：
在它们自己的“ drop”事件中为这些元素添加一个类，然后使所有这些具有带有选择器的类。
之后，方便的$.fn.each()和$.fn.offset()将有所帮助。
然后，您可以使用top，left而不是提到的xpos，ypos来处理这些坐标。
这是一个例子：
var coordinates = {};
$(".dropped").each(function(item) {
coordinates[$(item).attr("id")] = $(item).offset();
});
关于javascript - jQuery拖放可排序，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14549910/