Question

I am having an issue trying to get an array out of JS using the sortable on some drag and drop elements.
A working demo can be found at:

Example

What I need to achieve:

1. Drag item on image, get x,y (done)
2. after all items have been placed, use jQuery sortable? to get array of id’s with x,y coordinates.

array(23456->{xpos:234,ypos:234},23456->{xpos:234,ypos:234},….etc

I am not sure how to bind the sortable to the items only dropped on the image, and then get those values into an array

Here is the code so far:

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'
        });

    });

});

Any help getting pointed in the right direction, is greatly appreciated.
Just to clarify, I will be writing the values via AJAX to a DB for recall later.

Thanks in advance

Answer 1

Simple solution:

1. Add a class for those elements on their own ‘drop’ event, then get all of those have classes with a selector.

2. After that, a handy $.fn.each() and $.fn.offset() will help.

3. You can then work on those coordinates with top, left instead of your mentioned xpos, ypos.

Here is an example:

var coordinates = {};

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