We have provided the basics, how to create web page dynamically on the visualforce page. We have using jquery, to create dynamic page and drag and drop functionality.
For example, In business requirement, you need to assign the vehicle to the technician, you will use this. Take the list of vehicle images on the left side, unassigned technician list on the right side.
Result –
Before Assigned
After Assigned
Try the below code
<apex:page sidebar=”false”>
<html>
<head>
<link rel=”stylesheet” href=”https://code.jquery.com/ui/1.11.4/themes/swanky-purse/jquery-ui.css”/>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script></head>
<body>
<form id=”frm”>
</form>
<script>
$(‘<div id=”leftdiv” style=”float:left;border: 5px solid #ccc;”></div>’).appendTo(‘#frm’);
$(‘<div id=”rightdiv” style=”float:right;border: 5px solid #ccc;margin-right:10px;width:500px;height:100px;”>Drop Here</div>’).appendTo(‘#frm’);
$(‘#leftdiv’).append(‘<img src=”https://c.ap2.content.force.com/servlet/servlet.FileDownload?ile=01528000004V7ht” width=”100px” height=”100px” id=”img1″>’);
$(‘#leftdiv’).append(‘<img src=”https://c.ap2.content.force.com/servlet/servlet.FileDownload?file=01528000004V7hj” width=”100px” height=”100px” id=”img2″>’);
$(‘#leftdiv’).append(‘<img src=”https://c.ap2.content.force.com/servlet/servlet.FileDownload?file=01528000004V7he” width=”100px” height=”100px” id=”img3″>’);
$(“#leftdiv img”).draggable({
});
$(“#rightside”).droppable({
drop:function(){
alert(“dropped”);
}
});
</script>
</body>
</html>
</apex:page>
We are the ISV Partners and Please reach us for custom development => www.merfantz.com
———————- We hope it will help you ————————–
Author Bio
