DragDrop s tiskem v2

pro Enter-price.cz

by Petr Haluza

HTML

<div id="wrapper">
	<div id="origin" class="fbox">
		<img src="http://placehold.it/140x100" id="one" title="one" class="draggable" />
		<img src="http://placehold.it/150x100" id="two" title="two" class="draggable" />
		<img src="http://placehold.it/160x100" id="three" title="three" />
	</div>
  
  <p>test</p>
	<div id="drop" class="fbox">
   
	</div>
</div>

CSS

#origin
{
  background-color: lightgreen;
}

#origin img, #drop img {
  margin-top: 3px;
  margin-left: 5px;
}

#drop
{
  background-color: red;
  min-height: 120px;
}
.over {
  border: solid 5px purple;
}
.draggable
{
  border: solid 2px gray;
}

JavaScript

$(".draggable").draggable({ cursor: "crosshair", revert: "invalid"});

$("#drop").droppable({ accept: ".draggable", 
	drop: function(event, ui) {
  	var dropped = ui.draggable;
    var droppedOn = $(this);
    $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);    
  }
  /*, 
	over: function(event, elem) {
		$(this).addClass("over");
  },
  out: function(event, elem) {
  	$(this).removeClass("over");
  }*/
});

$("#drop").sortable();

$("#origin").droppable({ accept: ".draggable", 
	drop: function(event, ui) {
  	var dropped = ui.draggable;
    var droppedOn = $(this);
    $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);      
    }
  });