JSFiddle - React, Tailwind, and code Playground
by Diman0o
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>UserPanel</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
<script type="text/javascript">
$(document).ready(function(){
$("body").contextmenu(function(){return false;});
$('.main').on('mouseup', function(e){
e.preventDefault();
if(e.button == 2){
var mydiv = $('<div/>', {id: 'mydiv'});
$('.main').append(mydiv);
$("#mydiv").css({
"border":"1px solid black",
"width": "100px",
"height": "100px",
"margin-left": e.pageX,
"margin-top": e.pageY
})
$('.main').unbind('mouseup');
}
$("#mydiv").draggable();
})
})
</script>
</head>
<body style='margin: 0'>
<div class='main' style='width: 100%;
min-height: 1000px;
border: 1px solid black'
>
</div>
</body>
</html>