JSFiddle - React, Tailwind, and code Playground

by shaneburgess

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="span4" id="sideBar">
    <h3>Fields</h3>
<input class="field" type="text" id="textInput" placeholder="drag me" >
       
   
                                
<select class="field" id="select" ><option value="">Drag Me Too</option></select>
        

        <button class="btn" id="xyButton">Alert X,Y</button>
</div>

CSS

#sideBar{
 border: 1px solid #cccccc;
 height: 500px;
 padding: 20px;
}

.dragableFieldContainer{

    padding: 10px;
    
}

JavaScript

$(".field").draggable({ appendTo: "body" });

$(".field").mouseover(function(){
     //$(this).attr("disabled","true");
    $(this).disableSelection().draggable({cancel: null});
});

    $(".dragableFieldContainer").each(function(){
          $(this).offset({ top: $(this).attr("data-y"), left: $(this).attr("data-x") });
    });

$("#xyButton").click(function(){
    $(".field").each(function(){
        alert($(this).attr("id")+" "+"left: "+$(this).offset().left+" top :"+$(this).offset().top);
    });
});