Как реализовать перетаскивание списка композиции пользовательского интерфейса

0

Я новичок в веб-разработке, мне нужно создать пользовательский интерфейс состава списков с некоторыми функциями перетаскивания. Я нашел 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");
}

Я плохо застрял в получении списка предметов, упавших и их порядок после составления...

и любое руководство по "использованию этого jsfiddle UI в приложениях asp.net" было бы действительно полезно.

  • 0
    Вы уверены, что вы новичок ??
Теги:

1 ответ

0

Не могу дать вам правильный ответ для этого примера, но вы можете использовать метод serialize для получения правильного порядка ваших товаров, и это правильный способ его достижения. Однако метод serialize работает только в том случае, если сортируемый список id="key_value", то есть id="item_1", где "item" - это ключ и "1" значение. В этом примере я заметил, что вы можете иметь несколько клонов одного и того же элемента с одинаковыми идентификаторами (2 элемента на временной шкале с id = item_3), это невозможно.

Я также новичок в jquery, но у меня была такая же проблема в моем проекте и решена с использованием метода serialize.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню