Creating Draggable Objects Using jQuery: My First Pull Request

Being Dragged

 

I am still a new developer when it comes to the rest of the Web Development world. Today is kind of a big day for me. Today I created my first pull request for a repository that I liked. The repo is called flakes. It is a bootstrap like template for creating business apps and I couldn’t help but look into it. All that aside I am excited to share the changes I made with everyone reading.

What I did was look into an already developed solution and decided to add something I wanted to make it better. What I added was done with a quick solution with the help of jQuery-UI. I also added some other arguments into it to spice it up a tiny bit but not too much. I didn’t want the top contributors to get mad at me. I added some elements to make draggable elements.

HTML

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>

<div class="body">
  <div class="draggable-area">
    <span class="draggable drag-button">Drag Me!</span>
    <span class="draggable drag-button">Drag Me!</span>
    <span class="draggable drag-button">Drag Me!</span>
    <span class="draggable drag-button">Drag Me!</span>
  </div>
  <div class="droppable-area">
    <div class="snap-box drop-area"></div>
    <div class="snap-box drop-area"></div>
    <div class="snap-box drop-area"></div>
    <div class="snap-box drop-area"></div>
  </div>
</div>

CSS

.draggable-area{
  background-color: #eee;
  width: 30%;
  height: 200px;
}

.droppable-area{
  background-color: #eeeee1;
  width: 30%;
  height: 200px;
}

.drag-button{
 padding: 10px;
  background-color: #fff;
  border-radius: 10px;
}

.drop-area{
  padding: 20px;
  width: 50px;
  background-color: #fff;
  border: 1px solid black;
}

After setting up the HTML and CSS to get our basic structure we need to start adding some lines to our JavaScript file. The first line we use to initialize a draggable object.

$(function() {
   $( ".draggable" ).draggable({ snap: true });
   $( ".draggable" ).draggable({ snap: ".snap-box",
                                 snapMode: "inner",
                                 snapTolerance: 30,
                                 cursor: "crosshair"
     });
});

We create a jQuery object and tie the .draggable class to the divs to indicate that they are able to be dragged around the page. We also add in our first argument:

snap: true 

So that we can create divs that the object will snap to.

After that we add some more arguments so that we fine tune our drag objects. we use the next line:

snap: “snap-box”

Which we can start adding the “snap-box” class to our drop areas.

The preceding line adds the ability to snap the object to the inside of the div where we are dropping the object:

snapMode: "inner",

The last two lines are pretty easy:

snapTolerance: 30,
cursor: "crosshair"

The snap tolerance is pretty cool because it determines how close the object needs to be to the inside if the div before it grabs the object being dragged.. The very last line turns our pointer into a crosshair which reinforces the user that the object can be dragged.

See the end result here

After coming up with what I wanted to do I created a new branch and submited my pull request. I’m excited because it’s the first time I’ve ever done this. I plan on doing more in the future.

What I want is to become great. I want to become the guy on the forum that answers questions for everyone. Part of the core values of that developer is to contribute to open source projects. As long as the Internet stays a bastion for open source projects I will be present to grab hold and do what I can for the one’s that are slightly shinier in my eyes. Thanks for reading.

2 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply