拖动图像下方的元素答案

【问题标题】：Dragging element below image拖动图像下方的元素
【发布时间】：2019-05-21 13:25:15
【问题描述】：

我正在使用可拖动的 JQuery 来制作 DnD 应用程序，但我遇到了这个问题。当我将我的“框”拖到图像中时，它们会在图像下方，因此您看不到它们。这是我的 html 和 css：

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">

     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script type="text/javascript" src="main.js"></script>
</head>
<body>
<div class="content">

  <div>
    <div id="item1" class="item item1 ui-widget-content">
  </div>
    <div id="item2" class="item item2 ui-widget-content">
  </div>
    <div id="item3" class="item item3 ui-widget-content">
  </div>
    <div id="item4" class="item item4 ui-widget-content">
  </div>
    <div id="item5" class="item item5 ui-widget-content">
  </div>
    <div id="item6" class="item item6 ui-widget-content">
  </div>
    <div id="item7" class="item item7 ui-widget-content">
  </div>
    <div id="item8" class="item item8 ui-widget-content">
  </div>


<br><br><br><br><br><br>
  <div class="dash">
    <img src="image1.png">

    <div id="slot1" class="ui-widget-header">
     <p>holder</p>
    </div>

    <div id="slot2" class="ui-widget-header">
      <p>holder</p>
    </div>

    <div id="slot3" class="ui-widget-header">
      <p>holder</p>
    </div>

    <div id="slot4" class="ui-widget-header">
      <p>holder</p>
    </div>

    <div id="slot5" class="ui-widget-header">
      <p>holder</p>
    </div>

    <div id="slot6" class="ui-widget-header">
      <p>holder</p>
    </div>

    <div id="slot7" class="ui-widget-header">
      <p>holder</p>
    </div>

    <div id="slot8" class="ui-widget-header">
      <p>holder</p>
    </div>

  </div>
</div>



</body>
</html>

.content { position: relative; }

.item { 
  width: 65px;
  height: 65px; 
  padding: 5px; 
  float: left; 
  margin: 0 10px 10px 0; 
  font-size: .9em; 
  display: inline-block;
}

.item1 {background: darksalmon;}
.item2 {background: cyan;}
.item3 {background: darkgreen;}
.item4 {background: lightpink;}
.item5 {background: lightgreen;}
.item6 {background: brown;}
.item7 {background: purple;}
.item8 {background: orange;}

.dash { 
  position: relative;
}


.ui-widget-header, .ui-widget-content { margin: 0; display: inline-block; margin: 10px;}

.ui-widget-header{
  background: lightgrey;
  border: solid;
}


#slot1 { height: 75px; width: 75px; position: absolute; top: 23px; left:37px; }
#slot2 { height: 75px; width: 75px; position: absolute; top: 23px; left:129px;}
#slot3 { height: 75px; width: 75px; position: absolute; top: 55px; left:445.5px;}
#slot4 { height: 75px; width: 75px; position: absolute; top: 233px; left:571.2px;}
#slot5 { height: 75px; width: 75px; position: absolute; top: 233px; left:656px;}
#slot6 { height: 75px; width: 75px; position: absolute; top: 233px; left:742px;}
#slot7 { height: 75px; width: 75px; position: absolute; top: 233px; left:828px;}
#slot8 { height: 75px; width: 75px; position: absolute; top: 197.5px; left:9px; }

在此代码笔中，您可以看到它们位于“持有人”框下方： https://codepen.io/gezzzz/pen/ZNapaQ

我尝试了所有我能想到的调整 CSS 的方法，但我不知道是什么原因造成的

我该如何解决这个问题？

【问题讨论】：

成功了，谢谢。是的，我打算这样做，我从 HTML <style> 标记内的 CSS 开始，然后将其复制出来
很高兴为您提供帮助。我将其添加为您的答案，并对其进行了略微扩展

标签： javascript jquery html css drag-and-drop

【解决方案1】：

要解决此问题，您需要将.item 元素上的z-index 设置为高于#slotN 元素上的设置。默认情况下，它们设置为1000。

另外请注意，在您使用元素的唯一 ID 的 JS 和 CSS 中有很多不必要的重复。而是在它们上放置公共类，然后由它们选择。试试这个：

$(function() {
  const correct = [{
    slot: "slot1",
    item: "item3"
  }, {
    slot: "slot2",
    item: "item5"
  }, {
    slot: "slot3",
    item: "item2"
  }, {
    slot: "slot4",
    item: "item7"
  }, {
    slot: "slot5",
    item: "item7"
  }, {
    slot: "slot6",
    item: "item4"
  }];

  var answers = [{
    slot1: ""
  }, {
    slot2: ""
  }]

  $(".item").draggable({
    cursor: "pointer"
  });

  $('.slot').droppable({
    drop: handleDropEvent
  });
});


function handleDropEvent(event, ui) {
  var item = ui.draggable;
  var slot = $(this).attr('id');
  ui.draggable.position({ of: $(this),
    my: 'left top',
    at: 'left top'
  });
}

.content {
  position: relative;
}

.item, .slot {
  margin: 0;
  display: inline-block;
  margin: 10px;
}

.item {
  width: 65px;
  height: 65px;
  padding: 5px;
  float: left;
  margin: 0 10px 10px 0;
  font-size: 0.9em;
  display: inline-block;
  z-index: 10001;
}

.item1 { background: darksalmon; }
.item2 { background: cyan; }
.item3 { background: darkgreen; }
.item4 { background: lightpink; }
.item5 { background: lightgreen; }
.item6 { background: brown; }
.item7 { background: purple; }
.item8 { background: orange; }

.dash {
  position: relative;
}

.slot {
  background: lightgrey;
  border: solid;
  height: 75px;
  width: 75px;
  position: absolute;
}

#slot1 {
  top: 23px;
  left: 37px;
}

#slot2 {
  top: 23px;
  left: 129px;
}

#slot3 {
  top: 55px;
  left: 445.5px;
}

#slot4 {
  top: 233px;
  left: 571.2px;
}

#slot5 {
  top: 233px;
  left: 656px;
}

#slot6 {
  top: 233px;
  left: 742px;
}

#slot7 {
  top: 233px;
  left: 828px;
}

#slot8 {
  top: 197.5px;
  left: 9px;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="content">
  <div>
    <div id="item1" class="item item1 ui-widget-content"></div>
    <div id="item2" class="item item2 ui-widget-content"></div>
    <div id="item3" class="item item3 ui-widget-content"></div>
    <div id="item4" class="item item4 ui-widget-content"></div>
    <div id="item5" class="item item5 ui-widget-content"></div>
    <div id="item6" class="item item6 ui-widget-content"></div>
    <div id="item7" class="item item7 ui-widget-content"></div>
    <div id="item8" class="item item8 ui-widget-content"></div>
    <br><br><br><br><br><br>
    <div class="dash">
      <img src="image1.png">
      <div id="slot1" class="slot ui-widget-header">
        <p>holder</p>
      </div>
      <div id="slot2" class="slot ui-widget-header">
        <p>holder</p>
      </div>
      <div id="slot3" class="slot ui-widget-header">
        <p>holder</p>
      </div>
      <div id="slot4" class="slot ui-widget-header">
        <p>holder</p>
      </div>
      <div id="slot5" class="slot ui-widget-header">
        <p>holder</p>
      </div>
      <div id="slot6" class="slot ui-widget-header">
        <p>holder</p>
      </div>
      <div id="slot7" class="slot ui-widget-header">
        <p>holder</p>
      </div>
      <div id="slot8" class="slot ui-widget-header">
        <p>holder</p>
      </div>
    </div>
  </div>

【讨论】：

【解决方案2】：

.ui-widget-header {
    background: lightgrey none repeat scroll 0 0;
    border: medium solid;
    z-index: -1;
 }

【讨论】：