CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uidom
konadrian
konadrian

Reputation: 581

Jquery put element inside another not after

I have a few images and some element which I can drag and drop on images 

<span name="imie" id="drag1" class="drag">
    <img name='aa' id='test' src="http://placehold.it/80x80/c9112d/fff&text=1" width="70px" height="20px" />
    </span>
    <span>Imię</span> 

<div class="col droppable">
    <div class="canvas">
        <img class="img-bg" src="test.jpg">
    </div>
    <div class="canvas">
        <img class="img-bg" src="test.jpg">
    </div>                    
</div>

I want to add dropped box inside <div class="canvas"> after or before img. I want to see that box is on img but in code it should be inside canvas not after This is my script

 var counter = 0;
        var x = null;
        //Make element draggable
        $(".drag").draggable({
            helper: 'clone',
            cursor: 'move',
            tolerance: 'fit',
            revert: true
        });

        $(".droppable").droppable({
            accept: '.drag',
            activeClass: "drop-area",
            drop: function (e, ui) {
                if ($(ui.draggable)[0].id !== "") {


                    x = ui.helper.clone();
                    ui.helper.remove();
                    x.draggable({
                        helper: 'original',
                        cursor: 'move',
                        containment: '.droppable',
                        tolerance: 'fit',
                        drop: function (event, ui) {
                            $(ui.draggable).remove();
                        }
                    });


                    x.addClass('remove');

                    var el = $("<span><a href='Javascript:void(0)' class='xicon delete'                  title='Remove'</a>X</span>");
                    $(el).insertAfter($(x.find('img')));
                    x.appendTo('.droppable');
                    $('.delete').on('click', function () {
                        $(this).parent().parent('span').remove();
                    });
                    $('.delete').parent().parent('span').dblclick(function () {
                        $(this).remove();
                    });
                }
            }
        });

I suppose that problem is in x.appendTo('.droppable'); . But I can't handle with it. And whole example online HERE

Upvotes: 1

Views: 167

Answers (2)

laaposto
laaposto

Reputation: 12213

You have to make your <div class="canvas"></div> droppable not the <div class="col droppable"></div>

Try:

HTML:

<div class="col ">
    <div class="canvas droppable">
        <img class="img-bg" src="http://formularze.iform.pl/zdjecia/formularze/4556/SF_sdfra.gif">
    </div>
    <div class="canvas droppable">
        <img class="img-bg" src="http://formularze.iform.pl/zdjecia/formularze/4556/SF_sdfra.gif">
    </div>                    
</div>

JS: 

$(this).append(x);

DEMO

Or if you want it before the img Try:

$(this).prepend(x);

DEMO2

Upvotes: 2

Kolby
Kolby

Reputation: 2865

You are looking for for append 

$( ".canvas" ).append( "<p>whateva</p>" );

Ref: https://api.jquery.com/append/

Upvotes: 2

Related Questions