ブートストラップとJQueryドラッグ可能

Question

私は、ユーザーがコースのオブジェクトを通して検索することを可能にするウェブサイトを作成しています。先行検索からコースが選択されると、バスケットに追加されます。そのバスケットから、4つの異なる学期（ブートストラップグリッドに配置されている）の中から所望の学期（divである）にコースをドラッグ＆ドロップすることができます。

バスケットに追加されたコースは、普通のスタイルのdivで、バスケットとセメスターの間でドラッグ可能にしたいものです。どうすればこれを達成できますか？

のコースは、次のように作成されます。

function createBox(item){ 
    var html = ""; 
    html += "<div class='courseBox' id='" + item.number +"'>" + 
    "<h4 class='courseName'>" + item.name + "</h4>" + 
    "<button class='btn btn-danger xOut'>X</button>" + 
    "<p class='courseNumber'>" + item.number+ "</p>" + 
    "<p class='coursePts'>ECTS: " + item.points + " pts</p>" + 
    "</div>" 
    return html; 
}; 

をし、このようなバスケットに追加：

：私は、このようになります学期に入れたい

var course = createBox(item); 
$(".myCourseList").append(course); 

<div class="row" id="fourth"> 
    <!-- typeahead field is here --> 
    <h4>Basket</h4> 
    <div class="myCourseList"> 
    <!-- BASKET CONTENT GOES HERE --> 
    </div> 
    <h4>1st Semester</h4> 
    <div class="col-xs-12"> 
    <div class="col-xs-6"> 
     <h5>Courses</h5> 
     <div class="courses" id="courses1"> 
     <!-- Course content here --> 
     </div> 
    </div> 
    </div> 
</div> 

コースボックススタイリング：

.courseBox { 
    position: relative; 
    width: 100%; 
    height: auto; 
    border: thin solid #999; 
    padding: 0 0 0 10px; 
    margin-bottom: 5px; 
    border-radius: 5px; 
    background-color: #d3d3d3; 
} 

.coursePts{ 
    position: absolute; 
    bottom: -5px; 
    right: 7px; 
} 

.courseBox button { 
    position: absolute; 
    top: 5px; 
    right: 5px; 
} 

私はBootstrap、JQueryを使用していますが、最近JQuery UIを入力しましたが、JQuery UIを使用していませんでしたが、ドラッグ可能なものがあることはわかります。ドキュメントはちょっと私を少し混乱させるようです、誰かがそれを素人の言葉に入れることができたら、私はそれを非常に感謝します。

どのようにして、セメスター部門にコース課をドラッグ可能にすることができますか？

EDIT1：

また、私は、私はすでにブートストラップを使用していたときにjQueryのUIを「含む」といくつかの問題を抱えています。どの順番でそれらを「含める」のですか？

EDIT2：

問題を修正しました。 @ ahgindiaの投稿の2番目のコメントを参照してください。

Answer 1

draggable（）を使ってみてください。

オブジェクトをdraggable（）で使用できます。

Answer 2

draggable（）とdroppable（）の組み合わせを使用する必要があります。 セットアップの完全な例は、http://jqueryui.com/droppable/#shopping-cartを参照してください。