我真的建议尝试找到一种方法来使jQuery UI draggable和droppable库为您工作。 那么问题就变成了，类似于这个：如何使用JavaScript或jQuery拖动多个元素？

以下是我们如何将该问题的答案之一应用于您的问题。 我正在使用jQuery UI多可拖动插件，其整个脚本可以在这里找到：jquery.ui.multidraggable-1.8.8.js。

首先，让我们简化您的 HTML。 通过将可拖动和可拖放的div 放在元素中，我们不必为每个元素应用冗余样式。 相反，我们可以使用包含元素来设置样式

.HTML

<div id="parent">
    <div id="dragTargets">
        <div>123</div>
        <div>456</div>
        <div>789</div>
    </div>
    <div id='dropTargets'>
        <div></div>
        <div></div>
    </div>
</div>

使用该插件，我们可以在每个拖动div 上调用multidraggable。droppable可以丢弃的任何地方

JavaScript

$("#dragTargets div").multidraggable();
$("#dropTargets div").droppable();

自定义

我们可以通过样式来控制外观。例如，我们将制作任何可以接收yellow掉落的东西，任何你将要作为red掉落的东西，以及任何收到元素green的东西。

以下是一些样式作为 CSS 中的示例

.ui-state-highlight { background: green; }
.ui-state-active { background: yellow; }
.ui-state-hover { background: red; }

我们将控制何时将这些类应用于 JavaScript：

$("#dropTargets div").droppable({
    activeClass: "ui-state-active",
    hoverClass: "ui-state-hover",
    drop: function () {
        $(this).addClass("ui-state-highlight")
    }
});

多拖动

应设置当前所选元素的样式。 该脚本会将类ui-multidraggable应用于所有当前选定的元素。以下 CSS 将使用户清楚地知道他们的选择已被选中。

.ui-multidraggable {
    background: tan;
}

查看此演示。 只需按住 ctrl 即可选择多个div，然后一次拖动所有div。

js小提琴

代码中几乎没有错误。您可以在浏览器控制台上检查错误。
要检查可放置区域上的元素，您应该检查每个循环中的放置区域，而不是在每个循环之后。移动鼠标时，最好关闭选择以避免所选文本闪烁

$(document).on('click', '.a', function (e) {
   $(this).removeClass('selected');
});
$(document).on('dblclick', '.a', function (e) {
    $(this).toggleClass('selected');
});
$(document).on('mousedown', '.selected', function (e) {
    var dragMode = true;
    var div = $('<div></div>');
    $('.selected').each(function () {
        div.append($(this).clone());
    });
    div.prop('id', 'currentDrag');
    $('#currentDrag').css({
        left: e.pageX + "px",
        top: e.pageY + "px"
    });
    $('body').append(div);
    //disable selection on dropping start
    disableSelection();
    $(document).on('mousemove.drop', function(e){
       onDragging(e, dragMode);
    });
    $(document).on('mouseup.drop', function(e){
       onDragEnd(e, dragMode);
    });
});
function onDragEnd(e, dragMode){
    if(!dragMode)
       return;
    var tgt = e.target;
    var mPos = {
        x: e.pageX,
        y: e.pageY
    };
    $('.drop').each(function () {
        var pos = $(this).position(),
            twt = $(this).width(),
            tht = $(this).height();
         if((mPos.x > pos.left) && 
            (mPos.x < (pos.left + twt)) && 
            (mPos.y > pos.top) && 
            (mPos.y < (pos.top + tht))) {
            $(this).append($('#currentDrag').html());
        }
    });
    $('.drop .selected').removeClass('selected');
    $('#currentDrag').remove();
    $('.onDrop').removeClass('onDrop');
    //remove listener on docuemnt when drop end
    $(document).off('mousemove.drop');
    $(document).off('mouseup.drop');
    //enable selection
    enableSelection();
}    
function onDragging(e, dragMode){
    if(!dragMode)
       return;
    var p = $('body').offset();
    var mPos = {
        x: e.pageX,
        y: e.pageY
    }; 
    $('#currentDrag').css({
        left: mPos.x,
        top: mPos.y
    });
     $('.drop').each(function () {
        var pos = $(this).position(),
            twt = $(this).width(),
            tht = $(this).height();
         $(this).toggleClass("onDrop",
              (mPos.x > pos.left) 
                 && (mPos.x < (pos.left + twt)) 
                 && (mPos.y > pos.top) 
                 && (mPos.y < (pos.top + tht)) 
        );  
    });
}
function disableSelection(){
    $(document).on("selectstart", function(){   return false; });
    //firefox
    $("body").css("-moz-user-select", "none");
}  
function enableSelection(){
    $(document).off("selectstart");
    //firefox
    $("body").css("-moz-user-select", "");
}  

我更新了你的代码：http://jsfiddle.net/mDewr/46/，可以帮到你。

有几个错误，我现在不会列出，但您可以将旧版本与新版本进行比较。

    $(document).on('dblclick', '.a', function (e) {
      $(this).toggleClass('selected');
    });
    $(document).on('mousedown', '.selected', function (e) {
      var div = $('<div id="currentDrag"></div>');
      $('.selected').each(function () {
          div.append($(this).clone(true));
      });
      var p = $('body').offset();
      var l = e.pageX - p.left;
      var t = e.pageY - p.top;
      console.log(l, ', ', t);
      $('body').append(div);
      $('#currentDrag').css({
          left: l,
          top: t
      });
    });
    $(document).on('mouseup', '.selected', function (e) {
      $('.d').each(function(index, item){
          var $i = $(item);
          if (e.pageX >= $i.offset().left &&
              e.pageX <= $i.offset().left + $i.width() &&
              e.pageY >= $i.offset().top &&
              e.pageY <= $i.offset().top + $i.height()) {       
              console.log('Dropped');
              var $cl = $('#currentDrag').find('>*').clone(true);
              $i.append($cl);
          }
      });
      $('.selected').removeClass('selected');          
      $('#currentDrag').remove();
    });
    $(document).on('mousemove', function (e) {    
      var p = $('body').offset();
      $('#currentDrag').css({
          left: e.pageX - p.left,
          top: e.pageY - p.top
      });          
    });

http://jsfiddle.net/mDewr/43/

在此版本中，一切都应该可以完美运行（这是一个更新）。PS：我已经改成了1.7+ jQuery，但是你可以很容易地把它改回<1.7。此外，您不需要自定义属性，而是使用 css 类。