jQuery UI销毁父div

Posted 2021-03-31

我有一些正方形，我把图像放入可拖动和可放置的像这样

<div class="mymaindiv">
    <div class="myimagetofill">
        <div class="myimage"></div>
    </div>
    <div class="myimagetofill">
      <div class="myimage"></div>
    </div>
    <div class="myimagetofill">
      <div class="myimage"></div>
    </div>
</div>

所以我这样做

$('.myimagetofill').droppable({
    accept:'.spell',
    out: function(ev, ui){
        console.log($(this));
        if(ui.draggable.parent().prop('className').indexOf('myimagetofill') >= 0){
            ui.helper.off('mouseup').on('mouseup', function () {
                ui.draggable.remove();
            });
        }
    },

它工作，但当我去我的div旁边的广场，这是删除它。我想删除只有当我把div“myimage”带到父母“mymaindiv”之外时才会删除。我怎样才能做到这一点？

编辑：

这是一个演示：http://jsfiddle.net/xpvt214o/174732/

当在灰色的容器中时，我希望我的可拖动物品只有在灰色物体外面或者在它的原始位置返回时才能消灭。否则，如果你将一个元素拖到另一个元素上，它将取代它们......

我有一个线索：事实是，当我辍学时，它会触发外出和下降...我不想在我出局时触发掉落。

谢谢

答案

为了得到，我相信，你正在寻找的功能，我不得不重写很多东西。

这里可以看到一个工作实例：https://jsfiddle.net/Twisty/1cr7Lxu9/12/

html

<div class="backgrounding">
  <div class="stats-category">
    <div class="stats-content contain">
      <div class="fire spell">
        <i class="fas fa-fire fa-3x"></i>
      </div>
      <div class="earth spell">
        <i class="fas fa-leaf fa-3x"></i>
      </div>
      <div class="water spell">
        <i class="fas fa-tint fa-3x"></i>
      </div>
      <div class="wind spell">
        <i class="fas fa-cloud fa-3x"></i>
      </div>
    </div>
    <div class="stats-header"><i class="fas fa-th-list fa-fw fa-sm"></i> Section 1</div>
    <div class="stats-content receive">
      <div class="spell-receiver empty"></div>
      <div class="spell-receiver empty"></div>
      <div class="spell-receiver empty"></div>
      <div class="spell-receiver empty"></div>
    </div>
  </div>
</div>

利用FontAwesome帮助给出部分主题和感觉。在添加，移动和删除项目时，设置更好的类可以使事情变得更容易或更好。

CSS

.backgrounding {
  width: 310px;
  height: 240px;
}

.stats-content {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.stats-category {
  display: inline-flex;
  flex-direction: column;
}

.stats-header {
  background-color: lightgray;
  padding-top: 1px;
  border-radius: 25px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  font-family: monospace;
  margin-bottom: 5px;
}

.stats-content {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.fire {
  background-color: #ff6400;
}

.earth {
  background-color: #7f5f00;
}

.water {
  background-color: #007bff;
}

.wind {
  background: #00bf00;
}

.stats-content.contain .spell {
  color: white;
  border-radius: 25px;
  height: 72px;
  width: 72px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-align: center;
  text-shadow: 2px 2px 4px #000000;
  margin: 2px;
}

.stats-content.receive .spell {
  color: white;
  border-radius: 25px;
  height: 72px;
  width: 72px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-align: center;
  text-shadow: 2px 2px 4px #000000;
}

.spell i.fas {
  margin-top: 14px;
}

.spell-receiver {
  border-radius: 25px;
  height: 72px;
  width: 72px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 1px;
}

.spell-receiver .remove {
  z-index: 1001;
}

.spell-receiver.empty {
  background-color: #c0c0c0;
  border: 1px dashed #a0a0a0;
}

.spell-receiver.filled {
  border: 1px solid #222;
}

.stats-content div.spell-receiver-border {
  border: 1px dashed #222;
  background: #a0a0a0;
}

一些小的添加和更改，使样式更容易。从广泛的样式开始，然后添加一些更精细的细节。

javascript的

$(function() {
  function makeRecSpellDrag($o) {
    $o.draggable({
      containment: '.stats-content.receive',
      scope: 'drop',
      opacity: 0.65,
      revert: "invalid",
      zIndex: 1000,
      start: function() {
        console.log("EVENT: dragstart (Make Spell Drag)");
        $(this).parent().find("i.remove").remove();
      }
    });
  }

  function cleanEmpty() {
    $(".stats-content.receive .filled").each(function(ind, el) {
      if ($(el).children().length < 2) {
        $(el).removeClass("filled").addClass("empty");
        $(el).find("i.remove").remove();
      }
    });
    console.log("INFO: Clean Empty Completed.");
  }

  function receiveSpell($t, $s) {
    var $c = $s.clone();
    if ($s.hasClass("moveable")) {
      $c = $s.detach();
    }
    if ($t.hasClass("empty")) {
      console.log("INFO: Rec Spell.", $t, $c);
      $c.attr("style", "");
      $t.removeClass("empty").addClass("filled");
      $t.append($c);
      if (!$c.hasClass("moveable")) {
        $c.addClass("moveable");
        makeRecSpellDrag($c);
      }
      $("<i>", {
        class: "fas fa-times-circle fa-sm remove",
        title: "RemoveSpell"
      }).appendTo($t).position({
        my: "left top",
        at: "left+8 top+8",
        of: $t
      }).click(function(e) {
        e.preventDefault();
        console.log("EVENT: click (Remove Item)");
        $t.empty();
        cleanEmpty();
      });
    } else {
      console.log("INFO: Rec Spell - Not Empty", $t);
      return false;
    }
  }

  $('.stats-content.contain .spell').draggable({
    helper: 'clone',
    scope: 'drop',
    containment: '.backgrounding',
    revert: "invalid",
    zIndex: 1000
  });

  $('.stats-content.contain .spell').dblclick(function() {
    console.log("EVENT: doubleclick");
    var me = $(this).clone();
    if ($('.stats-content.receive .empty').length) {
      var target = $('.stats-content.receive .empty').eq(0);
      receiveSpell(target, me);
    }
  });

  $('.spell-receiver.empty').droppable({
    accept: '.spell',
    scope: 'drop',
    hoverClass: 'spell-receiver-border',
    drop: function(ev, ui) {
      console.log("EVENT: drop");
      var droppedItem;
      if (ui.draggable.hasClass("moveable")) {
        droppedItem = ui.draggable;
      } else {
        droppedItem = ui.helper;
      }
      if ($(this).is(".empty")) {
        // accept dropped item
        receiveSpell($(this), droppedItem);
      } else {
        return false;
      }
      cleanEmpty();
    }
  });
});

由于你将要重复很多动作和过程，我将很多动作和过程转化为函数。