在可拖动对象的位置更改后，可拖动不起作用

Question

如果拖动顶部并覆盖超过底部的一半，则有2个标签，其位置与我交换。最初，这两篇论文都是可以拖延的。但是，为了交换位置，我交换了他们的innerHTML，一旦完成，它们都不再是可拖动的。我对jQuery很新，任何建议都会受到赞赏。

Heres，代码

这是html

的一部分

<div id="wrapper">
  <table id="panelTable" cellpadding="0" cellspacing="0">
      <tr id="panel_top_tr">
         <td id="panel_top_td" class="draggable">
            <div id="panel_top" class="panel">Panel Top</div>
         </td>
      </tr>
      <tr id="sep_tr">
         <td class="separator_horizontal"></td>
      </tr>
      <tr id="panel_bottom_tr">
         <td id="panel_bottom_td" class="draggable">
            <div id="panel_bottom" class="panel">Panel Bottom</div>
         </td>
      </tr>
  </table>
</div>

Theres是这个片段上方和下方的一堆html，但你得到了要点..

继承jQuery代码

$(function () {

        $_dropEnd = null;

        $(".draggable").draggable({
            axis: 'y',
            cursor: 'move',
            cancel: 'a',
            revert: 'invalid',
            snap: 'true',

            //store initial innerHTML values before dragging starts
            start: function () {
                table = document.getElementById("panelTable");
                row1 = document.getElementById("panel_top_tr");
                row2 = document.getElementById("sep_tr");
                row3 = document.getElementById("panel_bottom_tr");
                r1html = row1.innerHTML;
                r3html = row3.innerHTML;
            },

            //check position and exchange accordingly
            drag: function (event) {
                var headlineTop = $('#panel_top_td').position().top;
                var headlineHeight = $('#panel_top_td').height();
                var headlineBottom = headlineTop + headlineHeight;
                var headlineCenter = headlineTop + (headlineHeight / 2);

                var storyTop = $('#panel_bottom_td').position().top;
                var storyHeight = $('#panel_bottom_td').height();
                var storyBottom = storyTop + storyHeight;
                var storyCenter = storyTop + (storyHeight / 2);

                if (headlineBottom >= storyCenter) {
                    //Exchange                                               
                    row3.innerHTML = r1html;
                    row1.innerHTML = r3html;
                    isTop = false;
                    $('#panel_bottom_td').draggable('enable');
                    $('#panel_top_td').draggable('enable');
                }
            },
            stop: function (event, ui) {
                $(this).appendTo($_dropEnd);
                $_dropEnd = null;
            }
        });
    });

Answer 1

这是一个非常简单的任务的代码。我建议您查看jQuery UI Sortable，完全按照您的意愿，跨浏览器，轻松配置。