1

一部のドラッグ アンド ドロップ要素でソート可能を使用して、JS から配列を取得しようとして問題が発生しています。動作するデモは次の場所にあります。

例

私が達成する必要があるもの:

  1. アイテムを画像にドラッグし、x、y を取得 (完了)
  2. すべてのアイテムが配置された後、jQuery ソート可能を使用しますか? x、y座標でIDの配列を取得します。

array(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 を介して値を DB に書き込みます。

前もって感謝します

4

1 に答える 1

1

簡単な解決策:

  1. 独自の「ドロップ」イベントでこれらの要素のクラスを追加し、それらすべてにセレクターを持つクラスを取得します。

  2. その後、便利$.fn.each()で$.fn.offset()役立ちます。

  3. 次に、前述のの代わりに を使用してtop、これらの座標を操作できます。leftxposypos

次に例を示します。

var coordinates = {};

$(".dropped").each(function(item) {
    coordinates[$(item).attr("id")] = $(item).offset();
});
于 2013-01-27T17:44:24.583 に答える