Question

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

HTML：

<div id="storyboard">
  <div id="clips"></div>

  <div id="timelineNcommands">
    <div id="timelineCommands"></div>
    <div id="timelineHolder">
      <div id="timeline"></div>
    </div>
  </div>
</div>

<pre id="scratchpad"></pre>

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 = $("<div/>", {
      class: 'clip',
      id: 'clip-' + num
    }).html(
      "<h2>" + num + "</h2>"
    )

    div.appendTo('#clips')
    div.draggable({
      revert: "invalid",
      scroll: false,
      helper: "clone",
      connectToSortable: "#timeline",
      containement: '#storyboard',

      helper: function() {

        $("#storyboard").append(
          '<div id="clone" class="clip">' + 
          $(this).html() + '</div>'
        );

        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的新手但是，我在项目中遇到了同样的问题并使用序列化方法解决了。

如何实现拖放List组合UI

1 个答案: