Currently, I am attempting to troubleshoot a jsfiddle issue.
The main problem lies in my desire for the first two divs (with class="fbox") to be aligned next to each other on the same level. Furthermore, I am looking to enable dragging the image into the container div. This action successfully duplicates the HTML as intended, but I also aim to restrict the use of the image. For example, if I have utilized the first image in a horizontal div, I do not want that same image to appear in a vertical div simultaneously. Hence, I wish to remove it from the alternative div. To clarify further, I have set up a demonstration via jsfiddle. As a newcomer, I apologize if my explanation is lacking. Please review the fiddle and kindly point out any errors in my approach.
http://jsfiddle.net/KWut6/373/
Thank you
$('#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>