0

新しいアイテムを動的に追加するために使用しているこのコードがあります

 <!Doctype html>
    <head>
    <meta charset="utf-8">
    <style type="text/css">
    .tr_deco{
    background-color:pink;
    border:1px solid red;
    }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <script type="text/javascript">
    jQuery(function() {
    jQuery(".new_krud_slider").click(function(e){
    e.preventDefault();
    jQuery('.krud_dom').append("<form name='krud_submit' action='admin.php?page=exchange_page' method='post'><table class='sortable'><tr class='tr_deco'><td>Slider Title</td><td><input type='text' /></td><td>Slider Description</td><td><textarea></textarea></td><td>Slider Location</td><td><input type='text' name='x' value='Jenna Doe'/></td><td><a href=''>I</a></td></tr><tr class='tr_deco'><td></td><td></td><td></td><td></td><td></td><td><button>Save</button></td><td><button>Delete</button></td></tr></table></form>");
jQuery( ".sortable" ).sortable();
    });
    });
    </script>
    </head>
    <body>
    <a class="new_krud_slider" href="">make new</a>
    <table>
    <tr><td class="krud_dom"></td></tr>
</table>
    </body>
    </html>

ここにフィドルがありますhttp://jsfiddle.net/TRJXe/ ドラッグされたアイテムがドロップされた場所に留まる必要があります。

4

1 に答える 1

1

sortablejQuery ウィジェットを使用しています。draggableウィジェットを使用する必要があります

jQuery( ".sortable" ).draggable();

これにより、アイテムはドラッグされた場所にとどまります。を使用sortableすると、アイテムをドラッグできますが、放すと、アイテムは自動的に新しい場所に並べ替えられます。アイテムが 1 つしかないため、常に一番上に並べ替えられます。これが、手を離した後、同じ場所にジャンプして戻る理由です。

アップデート

質問の性質を明確にした後、問題の原因は、.sortable個々のフォームを呼び出していることです。sortablejQuery UI ウィジェットを適切に使用するには、並べ替えたいすべての要素を含む.sortable()要素を呼び出す必要があります。この場合、それは.krud_dom

したがって、次のよう.sortableに onを呼び出すことから始めます。.krud_dom

jQuery( ".krud_dom" ).sortable();

次に、新しいフォームをページに追加するたびに、別の呼び出しでウィジェットを「更新」する必要があります.sortable。

jQuery( ".krud_dom" ).sortable("refresh");

これがどのように機能するかを示す jsFiddle デモを作成しました。

--- jsFiddle デモ ---

于 2012-09-06T16:38:39.367 に答える