Making ein Bootstrap-Panel Drop-und ziehbare

Question

Ich brauche Hilfe, um ein Bootstrap-Panel Drop-und ziehbare mit jquery ui. Ich habe mich gefragt, ob mir jemand helfen würde.

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 Klasse:

<div class="pnlOp draggable droppable"> 

Answer 1

Erstellen Sie zwei divs wie 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'); 
        } 
       }); 

Hier ist eine Live-Vorschau von jsbin: https://output.jsbin.com/sericabara