拖放多個選項與選項

Question

我有兩個選項與多個選項。我想從一個多選元素拖放選項到其他選項。

問題是我想多選不允許拖動。現在我試圖創建一個新的可拖動元素，點擊任何選項並將其附加到主體。它工作正常。但問題是我無法開始拖動我的元素，當我點擊並開始拖動選項。我必須再次點擊並開始拖動我的可拖動元素。

是否有任何事件開始拖動？這樣我可以在創建新元素後觸發點擊選項？因此，我覺得我的選擇是拖延。

注意：我必須在我的情況下只使用多個選擇。我不能在這裏使用jQuery UI排序或其他類型的小部件。

這就是我想要做的。現在這是粗略的想法。解決方案

$(document).on('mousedown', 'select option', function(e) { 
    var self = $(this); 
    var offset = self.offset(); 
    var draggableDiv = $('<div />').prop('id', 'draggable').css({ 
     position: 'absolute', 
     left: offset.left, 
     top: offset.top, 
     width: self.width(), 
     height: self.height(), 
     cursor: 'default', 
     background: '#ff0', 
     opacity: 0.5 
    }).text(self.text()); 
    $('body').append(draggableDiv); 

    draggableDiv.draggable({ 
     revert: true, 
     containment: 'window' 
    }); 

    // function to start drag goes here 
    draggableDiv.trigger('dragstart'); 
}); 

Answer 1

我改變了事件的目標之後，我會重構它之前，它傳遞給拖動的，也是固定的位置（見註釋）

$(document).on('mousedown', 'select option', function(e) { 
    var self = $(this); 
    var offset = self.offset(); 
    var draggableDiv = $('<div />').prop('id', 'draggable').css({ 
     position: 'absolute', 
     left: e.pageX, // <-HERE 
     top: e.pageY, 
     width: self.width(), 
     height: self.height(), 
     cursor: 'default', 
     background: '#ff0', 
     opacity: 0.5 
    }).text(self.text()); 
    $('body').append(draggableDiv); 

    draggableDiv.draggable({ 
     revert: true, 
     containment: 'window' 
    }); 
    e.target=draggableDiv.get(0); // <-HERE 
    // function to start drag goes here 
    draggableDiv.trigger(e); 
}); 

demo

other demo - 看起來有點對我來說更準確

Answer 2

$(document).ready(function(){ 
    $(".droppable").droppable({ 
     drop: function(event, ui) { 
     var $list = $(this); 
     $helper = ui.helper; 
     $($helper).removeClass("selected"); 
     var $selected = $(".selected");     
     if($selected.length > 1){      
      moveSelected($list,$selected); 
     }else{ 
      moveItem(ui.draggable,$list); 
}          
     }, tolerance: "touch" 
     }); 

      $(".draggable").draggable({ 
       revert: "invalid", 
       helper: "clone", 
       cursor: "move", 
       drag: function(event,ui){ 
        var $helper = ui.helper; 
        $($helper).removeClass("selected"); 
        var $selected = $(".selected"); 
        if($selected.length > 1){ 
         $($helper).html($selected.length + " items"); 
        }          
       } 
      }); 

      function moveSelected($list,$selected){ 
       $($selected).each(function(){ 
        $(this).fadeOut(function(){ 
         $(this).appendTo($list).removeClass("selected").fadeIn(); 
        });     
       });    
      } 

      function moveItem($item,$list) { 
       $item.fadeOut(function() { 
        $item.find(".item").remove(); 
        $item.appendTo($list).fadeIn(); 
       }); 
      } 

      $(".item").click(function(){ 
       $(this).toggleClass("selected"); 
      }); 

     }); 

http://jsfiddle.net/caferdo/k5XJv/3/

下面是一個例子