Question

我正在尝试解决这个问题。

问题是我希望前两个div（class =“fbox”）在一行和同一级别。我可以将图像拖动到容器div。它重复html，我想要但我也想限制图像的使用。例如，如果我在水平div中使用了第一个图像，那么我不希望该图像同时位于垂直div中。我想从其他div中删除它。为了更好地阐述，我创建了一个jsfiddle。我是新人，请原谅我，如果我没有正确解释一切。看看，请让我知道我哪里出错了。

http://jsfiddle.net/KWut6/373/

由于

$('#x').bind('dragstart', function(e) {
  e.originalEvent.dataTransfer.effectAllowed = 'copy';
  e.originalEvent.dataTransfer.setData('Text', '#x');
});
$('#y').bind('dragstart', function(e) {
  e.originalEvent.dataTransfer.effectAllowed = 'copy';
  e.originalEvent.dataTransfer.setData('Text', '#y');
});

$('#drop-box').bind('drop', function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).html($(e.originalEvent.dataTransfer.getData('Text')).clone());
  return false;
}).bind('dragover', false);

$('#drop-box2').bind('drop', function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).html($(e.originalEvent.dataTransfer.getData('Text')).clone());
  return false;
}).bind('dragover', false);

#plot {
  width: 512px;
  min-height: 512px;
  background-image: url("https://cdn0.iconfinder.com/data/icons/large-glossy-icons/512/Chart_xy.png");
  background-repeat: no-repeat;
  background-color: #cccccc;
}
.fbox {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<image src="http://lorempixum.com/100/100/" draggable="true" id="x">
  <image src="http://vignette2.wikia.nocookie.net/steamplane/images/b/b0/Happy_Face_100x100.gif/revision/latest?cb=20120104232844" draggable="true" id="y">
    </br>

    <div id="drop-box" class="fbox" style="border: 1px solid;  min-height:512px; width: 100px;"></div>
    <div id="plot" class="fbox">hallo</div>

    <div style="padding-left:104px;">
      <div id="drop-box2" class="fboxf" style="border: 1px solid;  min-height:100px; width: 512px;"></div>
    </div>

Answer 1

div的问题是：对于这样的布局，您必须为每个div设置float属性为左

Div对齐，避免在两个div中使用相同的html

1 个答案: