HTML

Question

这是我为一次拖动多个项目而编写的jQuery代码。它现在可以拖拽但不能放弃。

这是代码

    $(document).on('click', function (e) {
        var target = e.target;
        if (!$(target).hasClass('a')) $('.selected').removeClass('selected');
    });
    $(document).delegate('.a', 'dblclick', function (e) {
        $(this).addClass('selected');
    });

    $(document).delegate('.selected', 'mousedown', function (e) {
        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);
    });

    $(document).on('mouseup', function (e) {
        var tgt = e.target;
        var mPos = {
            x: e.pageX,
            y: e.pageY
        };
        $('.drop').each(function () {
            var pos = $(this).offset(),
                twt = $(this).width(),
                tht = $(this).height();
        });
        if((mPos.x > pos.left) && (mPos.x < (pos.left + twt)) && (mPos.y > targPos.top) && (mPos.y < (pos.top + tht))) {
            $(this).append($('#currentDrag').html());
        }
        $('.drop .selected').removeClass('selected');
        $('#currentDrag').remove();
    });
    $('.drop').on('mouseup', function (e) {
        $(tgt).append($('#currentDrag').html());
        $('.drop .selected').removeClass('selected');
        $('#currentDrag').remove();
    });

    $(document).on('mousemove', function (e) {
        $('#currentDrag').css({
            left: e.pageX + "px",
            top: e.pageY + "px"
        });
    });

我的代码有什么问题，我怎样才能做到这一点。这是小提琴http://jsfiddle.net/mDewr/27/

Answer 1

我真的建议您尝试找一种方法让jQuery UI draggable和droppable库为您服务。然后问题变成，与此类似：How do I drag multiple elements with JavaScript or jQuery?。

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

首先让我们简化您的HTML。通过将我们的可拖动和可丢弃的div放在元素中，我们不必为每个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。

jsFiddle

Answer 2

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

    $(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，但你可以很容易地将它改回＆lt; 1.7。此外，您不需要自定义属性，而是使用css类。

Answer 3

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

$(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/，可以为您提供帮助。

无法在mouseup事件上删除元素

3 个答案:

HTML

的JavaScript

自定义

多可拖动的

jsFiddle