拖放多个选项与选项

我有两个选项与多个选项。我想从一个多选元素拖放选项到其他选项。拖放多个选项与选项

问题是我想多选不允许拖动。现在我试图创建一个新的可拖动元素，点击任何选项并将其附加到主体。它工作正常。但问题是我无法开始拖动我的元素，当我点击并开始拖动选项。我必须再次点击并开始拖动我的可拖动元素。

是否有任何事件开始拖动？这样我可以在创建新元素后触发点击选项？因此，我觉得我的选择是拖延。

注意：我必须在我的情况下只使用多个选择。我不能在这里使用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'); 
});

来源

2013-02-04 Tarun

看一看更新我的问题 – Tarun

http://api.jqueryui.com/draggable/#event-start –

看来想要通过单击事件到新创建的元素 –

我改变了事件的目标之后，我会重构它之前，它传递给拖动的，也是固定的位置（见注释）

$(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 - 看起来有点对我来说更准确

来源

2013-02-04 07:07:36

谢谢你，你是摇滚明星！你能否让我知道“e.target = draggableDiv.get（0）”的含义或逻辑“ – Tarun

”目标是'

$(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/

下面是一个例子

来源

2013-02-21 17:38:57

拖放多个选项与选项

回答

相关问题