如何实现拖放列表组成UI [英] How to implement drag and drop List composition UI

问题描述

我是Web开发的新手，我需要建立一些拖放功能的列表组成UI。我发现fiddel（ http://jsfiddle.net/dkuntz2/28EH5/3/ ）这是我的要求一场势均力敌的比赛。

I am a newbie for web development, I need to build a list composition UI with some drag and drop features. I found the fiddel (http://jsfiddle.net/dkuntz2/28EH5/3/) which is a close match of my requirement.

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");
}

我很喜欢停留在获取项目的列表中删除和作曲后，他们的订单......

I badly stuck on getting the list of items dropped and their order after composing...

和任何指南如何使用asp.net应用此的jsfiddle用户界面将是真正的帮助。

and any guide on "how to use this jsfiddle UI in asp.net applications" would be really helpful..

推荐答案

无法给你这个例子中，正确的答案，但是，您可以使用序列化的方法，让您的项目的正确顺序，这是正确的方法实现它。然而，序列化方法只能如果排序列表的孩子 ID =key_value，即 ID =ITEM_1 ，其中项目是键和1的值。在这个例子中，我注意到，你可以有同样的项目，以便有相同的ID（具有ID = ITEM_3时间轴2项）多个克隆，这是不可能的。

Can't give you the right answer for this example but, you can use the serialize method to get the correct order of your items and this is the proper way to achieve it. However, the serialize method only works if the sortable list's children id="key_value", i.e. id="item_1", where "item" is the key and "1" the value. In this example, I've noticed you can have multiple clones of the same item so having same ids (2 items in the timeline having id=item_3), it's impossible.

我也是在jQuery的一个新手，但我有同样的问题在我的项目，使用序列化的方法解决的。

I'm also a newbie in jquery but, I had the same issue in my project and solved using serialize method.

这篇关于如何实现拖放列表组成UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！