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可以让你拖动项目，是的，但是当你放手时，项目会自动分类到它的新位置。由于您只有一项，因此它始终会排在最前面；这就是为什么在你放开它后它会跳回到同一个位置。

更新

在澄清问题的性质之后，问题的根源是您正在调用.sortable每个单独的表格。要正确使用sortablejQuery UI 小部件，您需要调用包含要排序的所有元素的元素.sortable()。在这种情况下，那将是.krud_dom

因此，您需要首先调用.sortableon .krud_dom，如下所示：

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

然后，每次向页面添加新表单时，都需要“刷新”小部件，并再次调用.sortable：

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

我创建了一个 jsFiddle 演示，展示了它是如何工作的：

--- jsFiddle 演示 ---

于 2012-09-06T16:38:39.367 回答