如何实现拖放List组合UI

我是Web开发的新手，我需要构建一个带有拖放function的列表组合UI。 我发现fiddel（ http://jsfiddle.net/dkuntz2/28EH5/3/ ）与我的要求非常接近。

HTML：

 
 
 
 
 
 
 
 
 

  
  CSS： 
 #storyboard #clips { height: 100px; width: 500px; } #storyboard .clip { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -moz-box-sizing: border-box; box-sizing: border-box; height: 50px; width: 50px; margin: 10px; background: #d4d0ad; border: 10px solid #d4d0ad; overflow: hidden; float: left; z-index: 10; } #storyboard .clip h2 { font-size: 1.2em; margin: 0; padding: 0 0 10px; } #storyboard .clip p { margin: 0; padding: 0; } #storyboard #timelineNcommands { -moz-box-sizing: border-box; box-sizing: border-box; width: 220px; background: #f8f7f1;`enter code here` border: 5px solid #dddabe; overflow-x: scroll; } #storyboard #timelineNcommands #timelineHolder { margin-left: -5px; min-width: 100%; } #storyboard #timelineNcommands #timeline { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -moz-box-sizing: border-box; box-sizing: border-box; height: 70px; float: left; min-width: 100%; } 
  JS： 
 $(document).ready(function() { $("#timeline").sortable({ scroll: true, axis: 'x', }) $("#timeline").on('sortreceive', function(event, ui) { setTimelineWidth(0); }); $("#timeline").on('sortover', function(event, ui) { setTimelineWidth(70); }) var clipNums = [1, 2, 3, 4, 5] $.each(clipNums, function(i, num) { var div = $("
", { class: 'clip', id: 'clip-' + num }).html( "
" + num + "
" ) div.appendTo('#clips') div.draggable({ revert: "invalid", scroll: false, helper: "clone", connectToSortable: "#timeline", containement: '#storyboard', helper: function() { $("#storyboard").append( '
' + $(this).html() + '
' ); return $("#clone"); } }) }) }) function setTimelineWidth(extra) { if ($("#timelineNcommands").width() < ($("#timeline").sortable('toArray').length * 70) + extra) { $("#timeline").width(($("#timeline").sortable('toArray').length * 70) + extra + "px") $("#scratchpad").html(($("#timeline").sortable('toArray').length * 70) + extra + "px") } else $("#timeline").width("220"); } 
 在撰写之后，我严重依赖于删除项目列表及其订单… 
 任何关于“如何在asp.net应用程序中使用这个jsfiddle UI”的指南都会非常有用.. 


	







 
	
Answer 1
		      	
 无法为此示例提供正确的答案，但是，您可以使用序列化方法来获取项目的正确顺序，这是实现它的正确方法。 但是，序列化方法仅在可排序列表的子id="key_value" ，即id="item_1" ，其中“item”是键，“1”是值。 在这个例子中，我注意到你可以拥有相同项目的多个克隆，因此具有相同的ID（时间轴中有2个项目，id = item_3），这是不可能的。 
 我也是jquery的新手但是，我在我的项目中遇到了同样的问题并使用序列化方法解决了。