2

起源：

<ul class="supercategory">
    <li>
    <div class="supcat">
        <h4>
        <a class="new" href="/header1.html">header 1</a>
        </h4>
        <ul class="category">
            <li><a href="item1.html">Item 1</a></li>
            <li><a href="item2.html">Item 2</a></li>
        </ul>
    </div>
    </li>
    <li style="" class="">
    <div class="supcat">
        <h4>
        <a class="new" href="/header2.html">Header 2</a>
        </h4>
        <ul class="category">
            <li><a href="item1.html">Item 1</a></li>
            <li><a href="item2.html">Item 2</a></li>
        </ul>
    </div>
    </li>
</ul>
<div id="test">
</div>

ちょっとしたcss：

ul.supercategory { background: lightblue; }
.new{ background: yellow; }

そして jQuery UI の力:

$('.supercategory').sortable({
            cursor: 'move',
            axis: 'y',
            revert: true,
            stop: function (event, ui) {  }
        });

現在ドラッグされている要素のオブジェクトを取得するには、次のようにする必要があることを知っています。

stop: function(event, ui) { var obj = ui.item; }

しかし、新しい位置にドラッグする代わりに、配置された要素のオブジェクトを取得するにはどうすればよいですか?

たとえば、最初の li を新しい位置にドラッグした場合 (2 番目の li になります)、2 番目の li が my の代わりにその場所に配置された場合、この要素を jQuery UI のオブジェクトとして取得するにはどうすればよいですか?

私のフィドルを見てください：http://jsfiddle.net/Stasonix/jCMuQ/1/

upd 1.まずフィドル。http://jsfiddle.net/Stasonix/jCMuQ/5/

コードより:

var is_received = false;

$('.supercategory').sortable({
            cursor: 'move',
            axis: 'y',
            revert: true,
            receive: function(event, ui){ is_received = true;  },
            stop: function (event, ui) {

                is_received = true;

            },

    deactivate: function(event, ui) {

        if (is_received){

            $('#test').text(ui.item.find('.new').attr('href'));

            is_received=false;

        }            

    }


 });

まあ...まだ解決策が必要ですが、うまくいかないようです。

4

1 に答える 1

1

オブジェクトのインデックス/位置を追跡し、イベントを使用して、ドラッグした新しいオブジェクトを取得するためにこれを試すことができstartますdeactivate。

// Define static variables to keep track of the index / position of your dragged object
var prev_index =  null;   // Previous index / position of your dragged object
var next_index = null;    // Next index / position of your dragged object

$('.supercategory').sortable({
    cursor: 'move',
    axis: 'y',
    revert: true,
    start : function(event, ui) {
        prev_pos = ui.item.index();
    },
    deactivate : function(event, ui) {
        next_pos = ui.item.index();
    },
    stop : function(event, ui) {
        // Your new object: "el"
        var el = null;

        if(next_pos > prev_pos)
            el = $(".mydrag").get(next_pos-1); // Your previous object has been dragged! Your previous object was initially above your new object (Dragging downward)
        else if(next_pos<prev_pos)
            el = $(".mydrag").get(next_pos+1); // Your previous object has been dragged!  Your previous object was initially below your new object (Dragging upward)
        else
            el = $(".mydrag").get(prev_pos);   // Your previous object was not dragged and is at the same position

        $('#test').text($(el).find('.new').attr('href'));
    }
});

問題は、

  • オブジェクトが正常にドラッグされた場合、オブジェクトを下にドラッグするか上にドラッグするかに応じて、探している新しいオブジェクトはドラッグされたオブジェクトの上または下に配置されるため、ドラッグされたオブジェクトの新しいインデックス/位置-1 / +1
  • ただし、オブジェクトが正常にドラッグされなかった場合、「新しいオブジェクトはありません」となるため、新しいオブジェクトがドラッグされたオブジェクトになります。

.mydragクラスをドラッグ可能liな要素に必ず追加してください。

<ul class="supercategory">
    <li class="mydrag">
        <div class="supcat">
            <h4>
                <a class="new" href="/header1.html">header 1</a>
            </h4>
            <ul class="category">
                <li><a href="item1.html">Item 1</a></li>
                <li><a href="item2.html">Item 2</a></li>
            </ul>
        </div>
    </li>
    <li class="mydrag">
        <div class="supcat">
            <h4>
                <a class="new" href="/header2.html">Header 2</a>
            </h4>
            <ul class="category">
                 <li><a href="item1.html">Item 1</a></li>
                 <li><a href="item2.html">Item 2</a></li>
             </ul>
        </div>
    </li>
</ul>
<div id="test">
</div>

この解決策がまさにあなたが探していたものかどうかわかりません.不明な点がある場合は、質問してください.

于 2012-09-13T05:08:30.157 に答える