jQuery UI从父div中销毁

我有一些正方形，我把图像放进可拖动和可放下的地方，就像这样

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

它可以工作，但是当我走到div旁边的一个正方形时，这就是删除它。仅当我将div“myimage”带到父级“mymaindiv”之外时，我才想删除。我该怎么做

编辑：

下面是一个演示：

当我在灰色的容器里时，我希望我的拖拽物品只有在它从灰色的东西里出来或者回到它原来的位置时才能被销毁。否则，如果您将一个元素拖到另一个元素上，它将取消它们的位置

我有一个线索：事实是，当我辍学时，它会触发辍学和辍学事件。。。我不想在我不在的时候被触发掉

---

谢谢

我相信，要得到你想要的功能，我必须重写很多东西

这里可以看到一个工作示例：

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>

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

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();
    }
  });
});

$（函数（）{
函数makeRecSpellDrag（$o）{
$o.draggable({
包含：'.stats content.receive'，
范围：'删除'，
不透明度：0.65，
回复：“无效”，
zIndex:1000，
开始：函数（）{
log（“事件：dragstart（使拼写拖动）”；
$（this.parent（）.find（“i.remove”）.remove（）；
}
});
}
函数cleanpempty（）{
$（.stats-content.receive.filled”）。每个（函数（ind，el）{
if（$（el）.children（）.length<2）{
$（el）.removeClass（“填充”）.addClass（“空”）；
$（el）.find（“i.remove”）.remove（）；
}
});
日志（“信息：清空已完成。”）；
}
函数接收拼写（$t，$s）{
var$c=$s.clone（）；
如果（$s.hasClass（“可移动”））{
$c=$s.detach（）；
}
如果（$t.hasClass（“空”））{
log（“INFO:Rec-Spell.”，$t，$c）；
$c.attr（“风格”）；
$t.removeClass（“空”）.addClass（“填充”）；
$t.c；
如果（！$c.hasClass（“可移动”））{
$c.addClass（“可移动”）；
Makerec（美元）；
}
$("", {
类：“快到快到快到快到快到快到快到快到快到”，
标题：“RemoveSpell”
}).appendTo（$t）.位置({
我的：“左上”，
在：“左+8上+8”，
共：$t
})。单击（功能（e）{
e、 预防默认值（）；
日志（“事件：单击（删除项）”）；
$t.empty（）；
cleanpempty（）；
});
}否则{
log（“信息：记录拼写-不为空，$t”）；
返回false；
}
}
$（'.stats-content.contain.spell'）。可拖动({
助手：“克隆”，
范围：'删除'，
安全壳：'.background'，
回复：“无效”，
zIndex:1000
});
$（'.stats-content.contain.spell'）.dblclick（函数（）{
log（“事件：双击”）；
var me=$（this.clone（）；
if（$（'.stats-content.receive.empty'）.length）{
var target=$（'.stats-content.receive.empty'）.eq（0）；
接受咒语（目标，我）；
}
});
$（'.spell receiver.empty'）。可拖放({
接受：“.拼写”，
范围：'删除'，
悬停类：'咒语接收者边界'，
下拉：功能（ev、ui）{
console.log（“事件：drop”）；
var-droppedItem；
if（ui.draggable.hasClass（“可移动”））{
droppedItem=ui.draggable；
}否则{
droppedItem=ui.helper；
}
如果（$（this）.is（“.empty”））{
//接受丢弃的项目
接收拼写（$（此），droppedItem）；
}否则{
返回false；
}
cleanpempty（）；
}
});
});

---

因为有很多操作和过程需要重复，所以我将它们移动到函数中

您的HTML不正确。只能将

“mymaindiv”

设置为属性。看来你应该已经纠正了，我忘了谢谢！

.indexOf（'myimagetofill'）

应该是

.indexOf（'.myimagetofill'）

（类名有一个句号）？我不确定，因为我不使用jQuery UIYes我在这一部分中查找“myimagetofill”字符串创建演示/代码段会更好谢谢你的帮助！我将采用您所说的所有良好实践，使我的代码更清晰，并采纳您的一些想法。@ZeyukanIch'我希望这会有所帮助。如果是这样的话，我希望你觉得自己的答案是赞成的，如果它解决了你的问题，你可以考虑把它标记为答案。

.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;
}

$(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();
    }
  });
});