Question

我有三个图像可拖放到droppable div中。将图像放入可放置的div中时，图像不会完全掉落。我需要droppable div作为位置相对。删除droppable div中的位置属性非常有效。我如何通过相对位置实现这一目标。请帮我。在此先感谢..

#droppable {
  position: relative;
  overflow: hidden;
  margin-left: 10%;
  margin-top: 10%;
  width: 800px;
  height: 450px;
  border: 1px solid black;
  background: #EBECED;
  }

我的代码在Jsfiddle ..！

Answer 1

请试试这个：

我更改了CSS。在draggable / droppable div中添加了z-index：

#droppable {
      border: 1px solid black;
      height: 250px;
      margin-left: 30%;
      margin-top: -35%;
      overflow: hidden;
      position: relative;
      width: 490px;
      background: #EBECED;
      z-index:1;
  }

我已将img.drag更改为span.drag，因为class已分配给span。

span.drag {
      width: 40px;
      height: 40px;
      position: relative;
      z-index:2;
  }

Answer 2

在将克隆的图像附加到droppable div（具有相对位置）的同时，克隆的图像被放置在适当的位置（它自己的位置+它的父可放置div偏移值），所以我们需要省略那些父偏移值。

下面的代码对我有用..

ClonedImage.appendTo('#droppable');

var parentPostion = $('#droppable');

var leftAdjust = ClonedImage.position().left - parentPostion.offset().left;
var topAdjust = ClonedImage.position().top - parentPostion.offset().top;
ClonedImage.css({left: leftAdjust, top: topAdjust});

以上功能适用于Jsfiddle..!

拖放不完全落在位置相对可放置的div内

2 个答案:

下面的代码对我有用..