Question

我有一些正方形，我通过可拖动和可放置的图像放入图像

<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/

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

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

由于

Answer 1

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

这里可以看到一个工作示例：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();
    }
  });
});

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

jQuery UI销毁父div

1 个答案: