0
I have a div with a list of photos using the Bxslider plugin and I’m also using Jquery UI to perform drag and drop.
Now, what I need is a way to drag the image out of this div (photos), because when I try to drag it disappears inside the div itself. I need the image to appear inside the div (blades).
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%");
}
});