Tenho uma div com uma lista de fotos utilizando o plugin BxSlider e também estou utilizando JQuery UI para realizar o drag and drop.
Agora, o que eu preciso é uma forma de arrastar a imagem fora dessa div (fotos), pois quando eu tento arrastar ela some dentro da própria div. Preciso que a imagem apareça dentro da div (laminas).
HTML
div class="container well">
<div class="row" id="content">
<div class="col-md-3">
<div class="col-md-12 fotos slider2">
<img class="img-style"
src="\demonstracao\images\Teste\teste01.jpg" /> <img
class="img-style"
src="\demonstracao\images\Teste\teste02.jpg" /> <img
class="img-style"
src="\demonstracao\images\Teste\teste03.jpg" /> <img
class="img-style"
src="\demonstracao\images\Teste\teste04.jpg" /> <img
class="img-style"
src="\demonstracao\images\Teste\teste05.jpg" />
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12 laminas">
<div class="lamina" id="lamina4">
<!-- <canvas id="q1" width="85.669" height="55.433"
style="border: solid 1px;"></canvas>-->
</div>
</div>
</div>
JQuery
$(document).ready(function() {
$('.slider2').bxSlider({
slideWidth : 200,
minSlides : 4,
maxSlides : 4,
pager : false,
mode : 'vertical',
slideMargin : 5,
touchEnabled : true
});
$(".img-style").draggable({
helper : 'clone',
revert : "invalid",
containment :"document",
cursor : "move",
start : function(event, ui) {
$(ui.helper).css('width', "100%");
},
stop : function(event, ui) {
$(ui.helper).css('width', "100%");
}
});