jQuery перетаскивание с сортировкой

Question

У меня возникла проблема с попыткой получить массив из JS, используя сортировку на некоторых элементах перетаскивания. рабочая демо можно найти по адресу:

Example

Что мне нужно достичь:

1. Перетащите элемент на изображение, получить х, у (сделано)
2. после того как все элементы были размещен, используйте сортировку jQuery? для получения массива id с координатами x, y.

массив (23456 -> {XPOS: 234, YPos: 234}, 23456 -> {XPOS: 234, YPos: 234}, .... и т.д.

Я не уверен, как связать сортировка к элементам упала только на изображении, а затем получить эти значения в массив

Вот код до сих пор:

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 в БД для последующего вызова.

Заранее спасибо

Answer 1

Простое решение:

1. Добавить класс для тех элементов, на их собственном «падение» события, а затем получить все те имеют классы с селектором.

2. После этого удобно использовать $.fn.each() и $.fn.offset().

3. Вы можете работать над этими координатами с top, left вместо вашей упоминается xpos, ypos.

Вот пример:

var coordinates = {}; 

$(".dropped").each(function(item) { 
    coordinates[$(item).attr("id")] = $(item).offset(); 
});