JavaScript jQuery перетаскивая div - это действительно не так сложно?

Question

JavaScript jQuery перетаскивая div - это действительно не так сложно?

0

Я работаю над тем, чтобы мои модальные модели Durandal можно было перетащить на несколько дней. Там много информации, и я никогда не смог заставить их работать. В большинстве учебных пособий, вопросах stackoverflow и других подобных информационных источниках часто выполнялись эти длинные сложные блоки кода, чтобы выполнить эту работу. На веб-сайте W3.Org он был намного менее сложным, но мне было трудно заставить их методы перетаскивания работать над этим модулем Durandal, поскольку он добавлен в DOM динамически. Наконец, я закончил методы копирования-вставки и методы проб и ошибок, пока я не заработал (хотя и немного перегружен) с несколькими строками кода и перетаскиваемым атрибутом. Я хочу знать, если я что-то упустил... потому что это было намного проще, чем то, что я нашел... или это просто потому, что все прошло достаточно далеко, так как большинство сообщений я обнаружил, что он просто работает?

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

EDIT: Я ищу сделать это без дополнительных библиотек... отправил ответ ниже с новым кодом.

t1nr2y 20 март 2014, в 17:32

Источник

Теги:

javascript

jquery

draggable

durandal

2 ответа

0

Как вы отметили JQuery, почему бы не использовать JQuery UI Draggable? http://jqueryui.com/draggable/

код в буквальном смысле

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

и есть несколько вариантов, которые вы можете добавить в draggable для увеличения функциональности.

есть также JQuery Droppable: https://jqueryui.com/droppable/, который можно использовать с возможностью перетаскивания, чтобы разрешить недоступные местоположения:

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

Проверьте эту скрипту: http://jsfiddle.net/jFIT/qs3TF/

JF it 20 март 2014, в 13:54

Ещё вопросы

t1nr2y · Accepted Answer · 2014-03-21T13-16-00.000Z

В ответ на любой вопрос о 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;
        });

(ADDED) Есть уточнения, которые могут быть сделаны, например, предотвращение выбора текста и определение внешних границ... и если вы хотите сделать тонну уточнения - вы можете пойти с JQueryUI или какой-либо другой библиотекой, вы просто ищете что-то быстрое и простое, вы можете использовать это.

оставив этот ответ как (был отклонен только потому, что ТАК пользователь пропустил чтение, что я пытался сделать это без JQueryUI - тогда ТАК пользователь удалил свой комментарий ... все еще работает нормально