drag-drop-clone

drag, drop and clone element

by Pushpa Raj Badu

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<section>
  <div class="container">
    <div class="panel-body">
      <div class="panel-body">
          <div class="row main-wrapper" style="border: 1px solid #CCC; background-color: #FFF;">
              <div class="col-sm-3 sidebar" >
                  <div class="form-group"></div>
                  <div class="row">
                    <div class="col-sm-12">
                      <p>Signers List</p>
                    </div>
                  </div>
                  
                  <div class="form-group">
                    <div class="row">
                      <div class="col-sm-12" id="draggable1">
                          <div class="row">
                            <div id="signer-1" class="col-sm-6 col-sm-6 dragSigners" data-signer-id="1" data-document-id="1">
                              <span>First</span>
                              <span class="closeIt hideIt">x</span>
                            </div>
                            
                            <div id="signer-2" class="col-sm-6 col-sm-6 dragSigners" data-signer-id="2" data-document-id="1">
                              <span>second</span>
                              <span class="closeIt hideIt">x</span>
                            </div>
                          </div>
                      </div>
                    </div>
                  </div>


                  <div class="form-group">
                    <div class="row">
                        
                    </div>
                  </div>

                </div>


                <div class="col-sm-9 document-content">
                  <div class="form-group">
            
                  </div>
            
                  <div...

CSS

.navbar .btn, .navbar .btn-group {
    margin-top: 12px;
}

body{
    background: #EEE;   
}

header, .navbar-default{
    background: #FFF;
}

header{
    border-bottom: 2px solid #CCC;
}

.navbar-default{
    border: 0px;
}
/* end nav and body section every page*/



/*heading section every page*/
.headerbox {
    background-color: #EFEBFC;
    border: solid #E0DEDE 1px;
    color: #0C002E;
}

.bodybox {
    background-color: white;
    border: solid #E0DEDE 1px;
}
/* end heading section every page*/




/* button color */
.navbtnstyle {
    background-color: #24246B;
    color: white;
}
a.navbtnstyle:hover{color: white;}

.btnaddmore {
    background-color: #55555E;
    color: white;
}
a.btnaddmore:link{color: white;}
a.btnaddmore:hover{color: white;}
a.btnaddmore:visited{color:white;} 
a.btnaddmore:active{color: white;}


.btncancel {
    background-color: #31317A;
    color: white;
}
a.btncancel:link{color: white;}
a.btncancel:hover{color: white;}
a.btncancel:visited{color:white;} 
a.btncancel:active{color: white;}

.btnsave {
    background-color: #0E0E2B;
    color: white;
}
input.btnsave:hover {
    background: transparent;
    background-color: #0E0E2B;
    color: white;  
}

.btnloginsave {
    background-color: #31317A;
    color: white;
}
input.btnloginsave:hover {
    background: transparent;
    background-color: #31317A;
    color: white;  
}

.signinlink {
    color: #31317A;
}
a.signinlink:link{color: #31317A;}
a.signinlink:hover{color: #31317A;}
a.signinlink:visited{color:#31317A;} 
a.signinlink:active{color: #31317A;}
/* end button color */







/* errors in view page */
#error_explanation{
    border: 1px solid red;
    background-color: #FFDFDF;
    margin-bottom: 10px;
    padding: 5px 10px;
}

#error_explanation h2{
    font-size: 14px;
    font-weight: bold;
}

#error_explanation ul, #error_explanation li{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    color: red;
    font-size: 13px;
}

.error{
    color: red;
}
/*...

JavaScript

$(function(){
    DragSigner();
    DragMe();
  })

  //remove the dragsigner when click on close icon
  $(document).on("click", ".closeIt", function(){
    var parent = $(this).parent();
    parent.remove();
  });

// DragSigner()
  // function for dragging original signers from sidebar to document
  // DragSigner() is responsible for dragging, cloning and dropping
  // signature placeholder in the document
  function DragSigner(){

    $(".dragSigners").draggable({
      helper: 'clone',
      cursor: 'move',
      tolerance: 'fit',
      revert: true 
    });

    $("#document-reader").droppable({
      accept: '.dragSigners',
      activeClass: "drop-area",

      drop: function(e, ui) {
        dragEl = ui.helper.clone();
        ui.helper.remove();

        document_id   = dragEl.data("document-id");
        signer_id     = dragEl.data("signer-id");
        stopPosition  = dragEl.position();

        console.log(stopPosition)
        dragEl.data("signer-id", signer_id);

        dragEl.draggable({
          helper: 'original',
          cursor: 'move',
          tolerance: 'fit',
          drop: function (event, ui) {
            $(ui.draggable).remove();
          }
        });

        // append element to #document-reader
        dragEl.addClass("dragMe");
        dragEl.removeClass("dragSigners col-sm-6");
        dragEl.find("span.closeIt").removeClass("hideIt");
        dragEl.appendTo('#document-reader');

        // activate dragging for cloned element
        DragMe();
      }
    });
  }

function DragMe(){
    $(".dragMe").draggable({
      containment: "#document-reader",
      cursor: 'move',
      opacity: 0.35,
      stack: $('#document-reader'),
      scroll: false,
      appendTo: $("#document-reader"),
      start: function(event, ui) {
        startPosition = $(this).position();
      },
      stop: function(event, ui) {
        dragEl        = $(this);
        stopPosition  = dragEl.position();
        document_id   =...