Question

我们正在努力创建一个类似于简单视频创建者（如Windows Movie Maker或iMovie）的界面，我们遇到了时间线问题。

基本上，我们有一组剪辑可以拖动（使用jQuery UI的Draggable模块）到时间轴区域（jQuery UI Sortable div）。我们尝试做的事情的要点发布在这个jsFiddle http://jsfiddle.net/dkuntz2/28EH5/3/或更低的地方。

我们遇到的问题是，当您将剪辑从主剪辑部分拖动到时间轴并拖动时，尝试滚动时间轴而不是整个页面，整个页面会滚动，但仅限于您在时间轴上悬停时开始。要看到这一点，时间轴需要大于timelineNcommands div。这很奇怪，我们不喜欢它。

我们尝试实施Jquery UI draggable not scrolling the sortable container给出的解决方案，但无法使其发挥作用。任何有关正确方向的帮助或指示都将受到赞赏。

// 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>

// JavaScript（需要jQuery 2和jQuery UI 1.10）

$(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")
  else
    $("#timeline").width("220");
}

// 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;
  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%;
}

jQuery UI可排序和可拖动滚动问题

0 个答案: