Question

我一直在努力让我的Durandal模态可以拖延几天。那里有大量的信息，我真的无法让它们中的任何一个工作。大多数教程，stackoverflow问题和其他此类信息源通常都有这些长期精心设计的代码块来完成工作。在W3.Org网站上，它的复杂程度要低得多 - 但我很难让它们的拖拽方法在这个Durandal模式上运行，因为它被动态地添加到DOM中。最后，我结束了复制 - 粘贴 - 删除和试错法，直到我使用几行代码和draggable属性使其工作（虽然有点跳跃）。我想知道的是，如果我错过了什么......因为它比我发现的要容易得多......或者仅仅是因为事情已经发生了很多，因为大多数帖子我发现它只是有用吗？ / p>

HTML

 <div id="modalDialog" class="messageBox autoclose" draggable="true">
    <div class="modal-header">
       //modal html
    </div>
    <div class="modal-body">
       //modal html
    </div>
    <div class="modal-footer">
       //modal html 
    </div>
 </div>

JS

     self.deactivate = function () {
        //need to clear events since they will be added at next call
        document.ondrag = null;
        document.ondragend = null;
     };
     self.compositionComplete = function () {
        document.ondrag = StartDragging;
        document.ondragend = StopDragging;
     };

     function StopDragging() {
        document.onmousemove = null;
     }

     function StartDragging(e) {
        if (e == null)
           var e = window.event;

        // this is the actual "drag code"
        modalLeft = e.clientX;
        modalTop = e.clientY;

        $('#modalDialog').offset({
           top: modalTop,
           left: modalLeft
        });
     }

编辑：我希望在没有额外库的情况下这样做...已经在下面用新代码发布了答案。

Answer 1

正如您标记了JQuery，为什么不使用JQuery UI Draggable？ http://jqueryui.com/draggable/

代码实际上是

$(function() {
   $( "#draggable" ).draggable();
});

并且有许多选项可以添加到draggable中以增加功能..

还有JQuery Droppable：https://jqueryui.com/droppable/，可与draggable一起使用以允许可放置的位置：

 $(function() {
  $( "#draggable" ).draggable();
  $( "#droppable" ).droppable({
  drop: function( event, ui ) {
    $( this )
      .addClass( "ui-state-highlight" )
      .find( "p" )
        .html( "Dropped!" );
  }
 });
});

请检查这个小提琴： http://jsfiddle.net/jFIT/qs3TF/

Answer 2

在回答有关JQueryUI的任何问题时，我试图在没有这个问题的情况下进行，所以我将编辑我的问题，以确保知道这一点。

但对于那些也在研究这个问题的人来说，这很容易，尽管上面的代码确实存在一些缺陷。可能仍然有一些原因导致其他代码示例更加复杂，例如对于许多用例场景的一些真正的改进，但我重新编写它并且它更好，但仍需要一些调整。无论如何，这里有我感兴趣的人。

        var draggingMyModal;
        var bodyX;
        var bodyY;

        $(document.body).on('mousemove', function (e) {
           bodyX = (e.pageX) - ($('#myDialog .modal-header').width() / 2);
           bodyY = (e.pageY) - ($('#myDialog .modal-header').height() / 2);
           if (draggingMyModal) {
              draggingMyModal.offset({
                 top: bodyY,
                 left: bodyX
              });
           }
        });

        $(document.body).on("mousedown", "#myDialog .modal-header", function (e) {
           draggingMyModal= $('#myDialog');
        });

        $(document.body).on("mouseup", function (e) {
           draggingMyModal= null;
        });

（添加）有可以完成的改进，例如阻止文本选择和确定外部边界......如果你想做大量的改进 - 你可能想要使用JQueryUI或其他一些库但是如果你需要只是寻找快速简单的东西，你可以使用它。

JavaScript jQuery拖动div - 它真的没那么复杂吗？

2 个答案: