CODEWITHSUNDEEP
jquery
Dom
Dom

Reputation: 3

Making a bootstrap panel drop and draggable

I need help to make a bootstrap panel drop and draggable using jquery ui. I was wondering if anyone would help me.

Code:

     $( ".draggable" ).draggable({revert: true, snap: 'inner'});
$( ".droppable" ).droppable({
  drop: function( event, ui ) {
    var one = $(this).html();
    var two = ui.draggable.html();
    $(this).html(two);
    ui.draggable.html(one);
  }
});

HTML Class:

<div class="pnlOp draggable droppable">

Upvotes: 0

Views: 2515

Answers (1)

shireef khatab
shireef khatab

Reputation: 1005

Create two divs like so:

 <div class="draggable">Draggable</div>
 <div class="droppable">Droppable</div>

jQuery...

            $( ".draggable" ).draggable({revert: true, snap: 'inner'});
                $( ".droppable" ).droppable({
                  drop: function( event, ui ) {
                    var one = $(this).html();
                    var two = ui.draggable.html();
                    $(this).html(two);
                    ui.draggable.html(one);
                    $( ".droppable" ).css('background-color','yellow');
                    $( ".draggable" ).css('background-color','pink');
                  }
                });

Here is a live preview from jsbin: https://output.jsbin.com/sericabara

Upvotes: 2

Related Questions