CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapjquery-uidraggable
Zeliax
Zeliax

Reputation: 5386

Bootstrap and JQuery draggable

I'm creating a website that will allow a user to search through an object of courses. Once a course is selected from a typeahead search it is added to a basket. From that basket I will allow the user to drag and drop the course to a desired semester (which is a div) among 4 different semesters (arranged in a bootstrap grid).

The courses added to the basket are regular 'styled' divs and are what I want to make draggable between the basket and the semesters. How can I achieve this?

The courses are created like this:

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;
};

and added to the basket like this:

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

which I then want to put into a semester which looks like this: 

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

.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;
}

I am using Bootstrap, JQuery and recently just input JQuery UI, but I have however not been using JQuery UI before, but I do know that there is some draggable stuff in it. The documentation just seems to confuse me a little, so if someone could put it into layman's terms I'd appreciate it very much.

How do I make the course divs draggable onto the semester divs?

EDIT1:

Also I have some problems with "including" JQuery UI when I am already using Bootstrap. Which order do I "include" them in?

EDIT2:

I fixed the problems. Refer to the second comment on @ahgindia's post

Upvotes: 1

Views: 1724

Answers (2)

ahgindia
ahgindia

Reputation: 339

You need to use combination of draggable() and droppable() Refer http://jqueryui.com/droppable/#shopping-cart for complete example matching your setup.

Upvotes: 2

Sachin G S
Sachin G S

Reputation: 1318

Try using draggable().

you can use the object with draggable().

Upvotes: 0

Related Questions