javascript

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/

score 2 · Accepted Answer

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

以下是我们如何将该问题的答案之一应用于您的问题。我正在使用jQuery UI multiple draggable plugin，整个脚本可以在这里找到：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>

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

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

定制

我们可以通过造型来控制外观。作为一个例子，我们将制作任何可以接收 dropyellow的东西，任何你将要作为 drop 的red东西，以及任何已经收到 element 的东西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

score 1 · Accepted Answer

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

$(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/，可以帮助你。

score 1 · Accepted Answer

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

    $(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 类。

javascript - 无法在 mouseup 事件中删除元素

3 回答 3

HTML

JavaScript

定制

多拖拽

jsFiddle

Related

Reference