實現拖放

Question

我想實現一個簡單的拖放和拖動，如果有其他方法實現它，不需要鼠標放下，鼠標移動和鼠標事件。原因是因爲在我拖放鼠標事件之前，我的鼠標向上事件觸發了頁面上的附加事件。我不知道如何讓它適應火災，所以我正在尋找替代方法。

Answer 1

你可以嘗試使用jQuery UI的http://jqueryui.com/draggable/和http://jqueryui.com/droppable/達到你想要什麼，兩者的結合可以讓你做了很多，它很容易爲文檔有一些例子來上手，你可以找到很多這樣的例子一個：http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/

使其在移動設備（觸摸事件）兼容使用此腳本。讓jQuery UI的手機兼容：touchpunch.furf.com

我做了一個的jsfiddle，顯示你如何使用jQuery UI的可棄和可拖動的例子：

http://jsfiddle.net/mMDLw/2/

// jquery closure 
(function($, window, undefined) { 

    // on dom ready 
    $(function() { 

     initializeDropzone(); 

     initializeDraggables(); 

    }); 

    /** 
    * 
    * intializing the dropzone element 
    * 
    */ 
    var initializeDropzone = function() { 

     // initialize the dropzone to make the dropzone a droppable element 
     // http://jqueryui.com/droppable/ 
     $('#dropzone').droppable({ 
      accept: '.foo', // only elements with this class will get accepted by the dropzone 
      hoverClass: 'drop_hover', // css class that should get applied to the dropzone if mouse hovers over element 
      greedy: true, 
      drop: function onDrop(event, ui) { 

       console.log('#dropzone drop'); 

       var droppedElement = ui.draggable; 

       console.log(droppedElement); 

       // create an object and fill it with data we extract from element that got dropped 
       var droppedElementData = {}; 

       droppedElementData.id = parseInt(droppedElement.attr('data-foo-id')); 
       droppedElementData.name = droppedElement.text(); 

       var dropLogElement = $('#dropLog').find('ul'); 

       droppedElementData.position = dropLogElement.children().length + 1; 

       // create the list html to add a row about the dropped element to our log 
       var rowHtml = ''; 
       rowHtml += '<li id="' + droppedElementData.position + '_' + droppedElementData.id + '">'; 
       rowHtml += '<span class="position">' + droppedElementData.position + ') </span>'; 
       rowHtml += '<span class="name">' + droppedElementData.name + '</span>'; 
       rowHtml += '</li>'; 

       var row = $(rowHtml); 

       // append the new row to the log 
       dropLogElement.append(row); 

      } 

     }); 

    }; 

    /** 
    * 
    * intializing draggable elements 
    * 
    */ 
    var initializeDraggables = function() { 

     // http://jqueryui.com/draggable/ 

     // make all elements that have the class "foo" draggable 
     $('#droppables').find('.foo').draggable({ 
      refreshPositions: true, // refresh position on mouse move, disable if performance is bad 
      revert: function(event) { 

       console.log('a "foo" got dropped on dropzone'); 

       // if element is dropped on a dropzone then event will contain 
       // an object, else it will be false 
       if (event) { 

        // the event exists, this means the draggable element got dropped inside of the dropzone 
        console.log('YEP the event is not false'); 

        // the element that is being dropped 
        var draggedElement = $(this); 

        // add explosion effect to dragged element 
        draggedElement.effect(
          'explode', 
          1000, 
          function() { 

           console.log('drop scale effect finished'); 

           console.log(draggedElement); 

           // put the element back to its original position 
           draggedElement.css('left', '0'); 
           draggedElement.css('top', '0'); 

           // make the element visible again by fading it in 
           draggedElement.show('fade', {}, 1000); 

          } 
        ); 

        return false; 

       } else { 

        // false because draggable element got dropped outside of the dropzone 
        console.log('NOPE no object, the event is false'); 

        return true; 

       } 

      }, 
      start: function(event, ui) { 

       // the user started dragging an element 
       console.log('#droppables .foo drag start'); 

      }, 
      stop: function(event, ui) { 

       // the user has released the draggable element 
       console.log('#droppables .foo drag stop'); 

      } 
     }); 

     // make all elements that have the class "bar" draggable (but the dropzone wont accept them) 
     $('#nonDroppables').find('.bar').draggable(
      { 
       revert: true, // if the element did not get dropped in the dropzone or not accepted by it, then revert its position back to its original coordinates 
       start: function(event, ui) { 

        // the user started dragging an element 
        console.log('#nonDroppables .bar drag start'); 

       }, 
       stop: function(event, ui) { 

        // the user has released the draggable element 
        console.log('#nonDroppables .bar drag stop'); 

       } 
      } 
     ); 

    }; 

})(jQuery, window);