0
私はこのjsfiddleを修正しようとしています。Divアライメント、2つのdivで同じhtmlを避ける
問題は、最初の2つのdiv(class = "fbox")を1行で同じレベルにすることです。イメージをコンテナdivにドラッグできます。私が望むように、それはHTMLを複製しますが、私はまた、画像の使用を制限したいと思います。例えば、私が水平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>
放置するフロートpropertを設定しなければならないようなレイアウトのために データのdivをチェックし、両方のdivのデータがある場合は最初のdivからデータを削除しますと同じ。次のコードでは、このトリックを行いました: 'if($( '#div1').html()== $( '#div2').html()){ $( '#div1')。 ' – zzai