Question

我正在使用此代码来动态添加新项目

 <!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/ 我需要将拖动的项目留在掉落的地方。

Answer 1

您正在使用sortable jQuery小部件。您需要使用draggable小部件

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

这会让物品停留在拖动的位置。使用sortable可以拖动项目，是的，但是当你放手时，项目会自动分类到新的位置。由于您只有一个项目，因此它总是排在最前面;这就是为什么它在你放开之后会跳回到同一个地方。

<强>更新

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

因此，您需要先致电.sortable上的.krud_dom，例如：

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

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

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

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

--- jsFiddle DEMO ---

拖动的项目不会保留在新位置

1 个答案: