Widget Builder with Drag & Drop Feature

Sort of form widget builder with drag & drop functionality

by Lokesh Yadav

HTML

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Form Controls -->
<div class="wb-panel" id="wb-form-fields">
  <div class="wb-form-field-types">
    <div class="section">
        <a data-field-type="text" class="wb-form-button">Text</a>
        <a data-field-type="paragraph" class="wb-form-button">Paragraph</a>
    </div>
  </div>
</div>

<!-- Widget Response -->
<div class="wb-panel wb-response-container"></div>

CSS

.wb-panel {
    margin-bottom: 20px;
}

.wb-form-button {
  display: inline-block;
  margin: 0;
  padding: .563rem .844rem;
  border: 0 none;
  background: #16a085;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  line-height: 1.5;
  cursor: move;
  border-radius: .125rem;
  border: thin solid #19b394;
  border-bottom: 2px solid #16a085;
}
.wb-form-field-types a {
  font-size: 13px;
  display: inline-block;
  width: 48.5%;
  background-color: #1abc9c;
  margin-bottom: 9px;
  box-sizing: border-box;
}

.wb-response-container{
    clear: both;
    display: block;
    border: 1px dashed #ccc;
    min-height:200px;
    background: #eee;
}

.wb-response-container .wb-form-button {
    display: block
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight {
    border: 1px solid #fcefa1;
    background: #fbf9ee;
}

JavaScript

var App = App || {};
App.widget = App.widget || {};

// init drag
$( ".wb-form-button" ).draggable({ 
    revert: "invalid",
    cursor: "move",
    helper : 'clone'
});

// init drop
$(".wb-response-container").droppable({
    accept: ".wb-form-button",
    activeClass: "ui-state-highlight",
    drop: function(event, ui) {
        $(ui.draggable).clone().appendTo(this);
    }
}).sortable().disableSelection();