Как сделать перекидку фотографии с одного дива с другой???

Question

[artshelom]

Не могу разобраться в sortable, не получается чтобы картинки переходили из дива images1, в див images2
ЧТобы картинки оказались в классе ans.

<script>
            $( function() {
                $( "#ans-images-box" ).sortable({
                    connectWith: ".images-choise"
                });
            } );
        </script>

            <div id="images1" class="images-choise-box">
                <div class="images-choise"><img src="img/images/img1.jpg" class="img"></div>
                <div class="images-choise"><img src="img/images/img2.jpg" class="img"></div>
                <div class="images-choise"><img src="img/images/img3.jpg" class="img"></div>
                <div class="images-choise"><img src="img/images/img4.jpg" class="img"></div>
                <div class="images-choise"><img src="img/images/img5.jpg" class="img"></div>
                <div class="images-choise"><img src="img/images/img6.jpg" class="img"></div>
                <div class="images-choise"><img src="img/images/img7.jpg" class="img"></div>
                <div class="images-choise"><img src="img/images/img8.jpg" class="img"></div>
                <div class="images-choise"><img src="img/images/img9.jpg" class="img"></div>
            </div>
 <div id="images2">
        <div class="ans-cell-images">
            <span class="num-cell">1</span>
            <div class="ans"></div>
        </div>
        <div class="ans-cell-images">
            <span class="num-cell">2</span>
            <div class="ans"></div>
        </div>
        <div class="ans-cell-images">
            <span class="num-cell">3</span>
            <div class="ans"></div>
        </div>
        <div class="ans-cell-images">
            <span class="num-cell">4</span>
            <div class="ans"></div>
        </div>
        <div class="ans-cell-images">
            <span class="num-cell">5</span>
            <div class="ans"></div>
        </div>
        <div class="ans-cell-images">
            <span class="num-cell">6</span>
            <div class="ans"></div>
        </div>
        <div class="ans-cell-images">
            <span class="num-cell">7</span>
            <div class="ans"></div>
        </div>
        <div class="ans-cell-images">
            <span class="num-cell">8</span>
            <div class="ans"></div>
        </div>
        <div class="ans-cell-images">
            <span class="num-cell">9</span>
            <div class="ans"></div>
        </div>
    </div>

Answer 1

[Сергей Собко]

В данном случае стоит понимать, что .sortable работает только внутри указанного селектора. При дефолтных настройках вытащить желаемый блок за пределы div нельзя.
Но стоит обратить внимание на Option-connectWith
P.s. на будущее - у каждой jQuery функции есть перечень опций, методов и событый с ней связанных. Когда пытаетесь с чем-то разобраться, то стоит обращаться к первоисточнику.

Comments

[artshelom]

Я знаю про этот метод у меня не получается сделать, чтобы картинка переместилась

[artshelom]

Если кому интересно решил проблему так:

$( function() {
                $( ".images-choise" ).sortable({
                    connectWith: ".ans"
//                    dropOnEmpty: false
                });

                $( ".ans" ).sortable({
                    connectWith: ".images-choise"
//                    dropOnEmpty: false
                });

                $( ".images-choise, .ans" ).disableSelection();
            } );