Sometimes, We have strucked in a script like drag and drop, here is the simple and easy code. Use below code to achieve this process.
<div id=”draggable1″ class=”ui-widget-content” style=”border-color: Green; height: 50px;”>
<p>Drag me around 1</p>
</div><br/>
<div id=”draggable2″ class=”ui-widget-content” style=”border-color: red;height: 150px;”>
<p>Drag me around 2</p>
</div><br/>
<div id=”draggable3″ class=”ui-widget-content” style=”border-color: Black;height: 100px;”>
<p>Drag me around 4</p>
</div><br/>
<div id=”draggable4″ class=”ui-widget-content” style=”border-color: blue;height: 50px;”>
<p>Drag me around 5</p>
</div>
</body>
</html>
</apex:page>
<p>Drag me around 1</p>
</div><br/>
<div id=”draggable2″ class=”ui-widget-content” style=”border-color: red;height: 150px;”>
<p>Drag me around 2</p>
</div><br/>
<div id=”draggable3″ class=”ui-widget-content” style=”border-color: Black;height: 100px;”>
<p>Drag me around 4</p>
</div><br/>
<div id=”draggable4″ class=”ui-widget-content” style=”border-color: blue;height: 50px;”>
<p>Drag me around 5</p>
</div>
</body>
</html>
</apex:page>
We have developed the feature for Drag And Drop Functionality using Visualforce Page. so kindly let us know if you have any query.
Result:-
We are the ISV Partners and Please reach us for custom development => www.merfantz.com
—————————- We Are Really Happy To Helping You!!!!!!!!!!! —————————–
Author Bio
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
<title>jQuery UI Draggable – Default functionality</title>
<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css” />
<link rel=”stylesheet” href=”/resources/demos/style.css” />
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; }
</style>
<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
<script src=”https://code.jquery.com/ui/1.12.0/jquery-ui.js”></script>
<script>
$( function() {
$( “#draggable1” ).draggable();
$( “#draggable2” ).draggable();
$( “#draggable3” ).draggable();
$( “#draggable4” ).draggable();
} );
</script>
</head>
<body>