0

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%");
        }
    });

1 Resposta 1

1

Encontrei uma solução, adicionei o seguinte código dentro do .draggable.

appendTo: 'body',

Essa propriedade insere a imagem como filha de body.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .