分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了拖放多个选定的draggable并使用Jquery UI还原无效的draggable，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

使用光标(套索)绘制一个框将在此 JSFiddle example中选择多个.item.

选定的.item变得可以拖延.没有.item的空.slot是有效的droppable.

当您在多个droppable上放置多个draggable时,只有相应的droppable无效时,只有.item哪个鼠标处于打开状态.

如果删除无效的droppable,如何使每个draggable revert？

使用Javascript：

$(function () {
  // we are going to store the SELEcted objects in here
  var SELEcted = $([]),@R_797_10586@l = [],offset = {
        top: 0,left: 0
    };

  $(document).SELEctable({
    filter: ".item",start: function (event,ui) { //remove draggable from SELEction,otherwise prevIoUs SELEction will still be draggable. 
        $(@R_797_10586@l).draggable("destroy");
    },SELEcted: function (event,ui) { // push SELEcted into @R_797_10586@l[].
        @R_797_10586@l.push(ui.SELEcted)
    },unSELEcted: function (event,ui) { //console.log('unSELEct ui: ',ui)
        u = ui.unSELEcted
        //remove unSELEcted from SELEction[].
        @R_797_10586@l = jQuery.grep(@R_797_10586@l,function (n) {
            return n !== u
        });
        //console.log('@R_797_10586@l array (unSELEcted): ',@R_797_10586@l)
    },stop: function (vent,ui) {
        //remove duplicated element from @R_797_10586@l[].
        jQuery.unique(@R_797_10586@l)
        $(@R_797_10586@l).each(function () {
            $(this).draggable(dragOption)
        })
        //$(@R_797_10586@l).draggable(dragOption);
        //var widget = $( ".SELEctor" ).draggable( "widget" );
        //console.log('widget: ',widget)
        console.log('break line---------------------------- ')
    }

  });

  //save drag option as an Obj.
  dragOption = {
    opacity: 0.45,delay: 300,connectToSortable: ".slot"
    //,Helper: "clone",distance: 5,snap: ".slot",snapMode: "inner",revert: "invalid",ui) {
        console.log('draggable start ui: ',ui)
        SELEcted = $(@R_797_10586@l).each(function () {
            var el = $(this);
            el.data("offset",el.offset())
        });
        offset = $(this).offset(); //get coordinates relative to document
    },drag: function (event,ui) { //console.log(offset.top)
        var dt = ui.position.top - offset.top,dl = ui.position.left - offset.left;
        SELEcted.not(this).each(function () {
            // create the variable for we don't need to keep calling $("this")
            // el = current element we are on
            // off = what position was this element at when it was SELEcted,before drag
            var el = $(this),off = el.data("offset");
            el.css({
                top: off.top + dt,left: off.left + dl
            });
        });
    },stop: function (event,ui) {
        console.log('drag stop ui : ',ui)
    }
  };

  //save drop option as an Obj.
  dropOption = {
    accept: '.item',drop: function (event,ui) {
        console.log('drop event : ',event);
        console.log('drop ui : ',ui)
    },activate: function (event,ui) { //console.log('this : ',this,'\n ui : ',out: function (event,ui) { //console.log('out',$(this))
    },deactivate: function (event,ui) { //console.log('deactivate')
    },tolerance: "intersect",instance: function (event,ui) { //console.log('instance ui : ',over: function (event,ui) { //console.log('this item : ',ui.draggable[0],'on this slot: ',this)
    },activeClass: "green3"

}
  // make empty slot droppable
  $(".slot:not(:has(>div))").droppable(dropOption)
}) <!--doc ready-->

HTML：

<body>
  <div id="container">
    <div id="header"></div>
    <div class="Box" id="BoxA">
      <h4>Box A</h4>
      <div class="slot" id="A1">
        <div class="item" id="a1"></div>
      </div>
      <div class="slot" id="A2">
        <div class="item" id="a2"></div>
      </div>
      <div class="slot" id="A3">
        <div class="item" id="a3"></div>
      </div>
      <div class="slot" id="A4"></div>
      <div class="slot" id="A5"></div>
    </div>
    <div class ="Box" id="BoxB">
      <h4>Box B</h4>
      <div class="slot" id="B1"></div>
      <div class="slot" id="B2">
        <div class="item" id="b2"></div>
      </div>
      <div class="slot" id="B3"></div>
      <div class="slot" id="B4"></div>
      <div class="slot" id="B5">
        <div class="item" id="b5"></div>
      </div>
    </div>
  </div> 
</body>

CSS：

document {
    BACkground-color: #FFF;
}

.Box {
    height: 180px;
    float: left;
    border-top-width: 5px;
    border-right-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 5px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #999;
    border-right-color: #999;
    border-bottom-color: #999;
    border-left-color: #999;
    width: 150px;
    text-align: center;
    margin-left: 100px;
}
.item {
    position: absolute;
    font-size: 12px;
    height: 14px;
    BACkground-color: #CCc;
    width: 110px;
    text-decoration: none;
    font-family: Arial,Helvetica,sans-serif;
    color: #999;
    margin-left: 6px;
    text-align: center;
}

#header,#footer {
    float: left;
    height: 200px;
    width: 100%;
}
.slot{
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: dotted;
    border-right-style: dotted;
    border-bottom-style: dotted;
    border-left-style: dotted;
    height: 15px;
    width: 120px;
    margin-top: 2px;
    text-align: center;
    vertical-align: middle;
    line-height: 90px;
    margin-right: auto;
    margin-left: auto;
    }
.ui-SELEcTing {
    BACkground: #FECA40;
  }
.ui-SELEcted {
    BACkground-color: #F90;
  }
.green3 {
    BACkground-color: #D9FFE2;
}

解决方法

你可以使用 document.elementFromPoint.

Updated Fiddle

为了删除/恢复原始的draggable,我们在drop事件中删除后执行以下操作：

>检查drop事件中的droppable是否包含.item.@H_801_37@如果droppable尚未包含.item,请转到步骤2,否则转到步骤3@H_801_37@> append()使用css()重置定位后对应的.slot元素@H_801_37@>使用animate()方法将元素恢复到我们在start事件中使用.data()缓存的上一个位置.

用于删除/恢复被拖动的额外项目：

>我们在每个项目的左右可见区域找到元素@H_801_37@被拖动(距被拖动的元素1px,这是@H_801_37@应该是下降目标)使用document.elementFromPoint.@H_801_37@>由于没有为这些元素触发实际的drop事件,我们使用stop事件的draggable来检查目标中的任何一个是否是.slot@H_801_37@>如果它们中的任何一个是.slot,这意味着该项目被删除了@H_801_37@droppable,我们继续上面提到的step1,否则我们转到step3@H_801_37@(手动将项目还原为原始位置)

$(function() {

  var dragOption = {
      delay: 10,opacity: 0.45,revertDuration: 100,start: function(event,ui) {
        $(".ui-SELEcted").each(function() {
          $(this).data("original",$(this).position());
        });
      },drag: function(event,ui) {
        var offset = ui.position;
        $(".ui-SELEcted").not(this).each(function() {
          var current = $(this).offset(),targetLeft = document.elementFromPoint(current.left - 1,current.top),targetright = document.elementFromPoint(current.left + $(this).width() + 1,current.top);
          $(this).css({
            position: "relative",left: offset.left,top: offset.top
          }).data("target",$.unique([targetLeft,targetright]));
        });
      },stop: function(event,ui) {
        $(".ui-SELEcted").not(this).each(function() {
          var $target = $($(this).data("target")).filter(function(i,elm) {
            return $(this).is(".slot") && !$(this).has(".item").length;
          });
          if ($target.length) {
            $target.append($(this).css({
              top: 0,left: 0
            }))
          } else {
            $(this).animate({
              top: 0,left: 0
            },"slow");
          }

        });
        $(".ui-SELEcted").data("original",null)
          .data("target",null)
          .removeClass("ui-SELEcted");
      }
    },dropOption = {
      accept: '.item',activeClass: "green3",drop: function(event,ui) {
        if ($(this).is(".slot") && !$(this).has(".item").length) {
          $(this).append(ui.draggable.css({
            top: 0,left: 0
          }));
        } else {
          ui.draggable.animate({
            top: 0,left: 0
          },50);
        }
      }
    }

  $(".Box").SELEctable({
    filter: ".item",ui) {
      $(".ui-draggable").draggable("destroy");
    },ui) {
      $(".ui-SELEcted").draggable(dragOption)
    }
  });
  $(".slot").droppable(dropOption);
});

.Box {
  float: left;
  width: 150px;
  height: 180px;
  text-align: center;
  margin-left: 20px;
  border: 5px solid #999;
}
.slot {
  position: relative;
  width: 120px;
  height: 15px;
  margin-top: 2px;
  margin: 0 auto;
  border: 1px dotted;
}
.item {
  width: 110px;
  height: 14px;
  margin: 0 auto;
  z-index: 1;
  BACkground-color: #CCc;
}
.ui-SELEcTing {
  BACkground: #FECA40;
}
.ui-SELEcted {
  BACkground-color: #F90;
}
.green3 {
  BACkground-color: #D9FFE2;
}

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="container">
  <div id="BoxA" class="Box">
    <h4>Box A</h4>

    <div id="A1" class="slot">
      <div id="a1" class="item"></div>
    </div>
    <div id="A2" class="slot">
      <div id="a2" class="item"></div>
    </div>
    <div id="A3" class="slot">
      <div id="a3" class="item"></div>
    </div>
    <div id="A4" class="slot"></div>
    <div id="A5" class="slot"></div>
  </div>
  <div id="BoxB" class="Box">
    <h4>Box B</h4>

    <div id="B1" class="slot"></div>
    <div id="B2" class="slot">
      <div id="b2" class="item"></div>
    </div>
    <div id="B3" class="slot"></div>
    <div id="B4" class="slot"></div>
    <div id="B5" class="slot">
      <div id="b5" class="item"></div>
    </div>
  </div>
</div>

其他参考：

> jQuery.unique()@H_801_37@> is()@H_801_37@> has()

P.S：只有当draggable小于droppable时才会有效(在这种情况下也是如此)