1

我们正在努力创建一个类似于简单视频创建器（如 Windows Movie Maker 或 iMovie）的界面，但我们在时间线式的东西上遇到了麻烦。

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

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

我们试图实现在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%;
}
4

0 回答 0