A Pen by Joe Watkins.

A-Pen-by-Joe-Watkins.markdown

A Pen by Joe Watkins

A Pen by Joe Watkins on CodePen.

License.

index.html

<h3>Feedback on activating draggable:</h3>
 
<div data-draggable="true">
  <p>Drag me</p>
</div>
 
<div data-droppable="true">
  <p>Drop here</p>
</div>

<p class="output"></p>

script.js

$("[data-draggable='true']").draggable({
  revert : 'invalid'
});

$("[data-droppable='true']").droppable({
  accept: "[data-draggable='true']",
  activeClass: "ui-state-default",
  drop: function(event,ui) {
    $(this).addClass( "ui-state-highlight" )
      .find("p")
      .html("Dropped!");
    console.log(event);
  }
});

style.css

[data-draggable='true'] { 
  width: 90px; 
  height: 90px; 
  padding: 0.5em; 
  background:#eee;
  float: left; 
  margin: 10px 10px 10px 0;
  border-radius:90px;
  cursor:move; 
  text-align:center;
}

[data-droppable='true'] { 
  width: 120px; 
  height: 120px; 
  padding: 0.5em; 
  background:#ddd;
  float: left; 
  margin: 10px; 
}

.ui-state-default {
  border:dashed 2px red;
}