Drag image outside of div using Jquery UI

Asked

Viewed 174 times

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%");
        }
    });
javascript jquery html front-end

1 answer

1


I found a solution, added the following code inside the .draggable.

appendTo: 'body',

This property inserts the image as body daughter.

Browser other questions tagged javascript jquery html front-end

You are not signed in. Login or sign up in order to post.