You need to sign in to do that
Don't have an account?
Puja Patil 13 Drag n Drop functionality
How to implement Drag n Drop functionality for div section in VFPage ..?
Starting November 20, the site will be set to read-only.
On December 4, 2023,
Apex Code Development (90768)
General Development (55146)
Visualforce Development (37251)
Lightning (18265)
APIs and Integration (17146)
Trailhead (11680)
Formulas & Validation Rules Discussion (11337)
Other Salesforce Applications (8116)
Jobs Board (6655)
Force.com Sites & Site.com (4842)
Mobile (2694)
You need to sign in to do that
Don't have an account?
Puja Patil 13
Try the following Code fro Drag and Drop <div> . I think it helps you.
<apex:page >
<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: 150px; height: 150px; 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>
<div id="draggable1" class="ui-widget-content">
<p>Drag me around 1</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>Drag me around 2</p>
</div>
<div id="draggable3" class="ui-widget-content">
<p>Drag me around 4</p>
</div>
<div id="draggable4" class="ui-widget-content">
<p>Drag me around 5</p>
</div>
</body>
</html>
</apex:page>
All Answers
Drag and Drop functionality can be implemented in VF page using some Javascript libraries. See below link of JitendraZaa's blog:
http://www.jitendrazaa.com/blog/salesforce/salesforce-drag-and-drop-file-uploader-component-with-progress-bar-html5-and-pure-javascript-based/
This blog is for drag n drop file /image. I want code drag-drop fields on vfpage.
If you want to drag drop <div> component then goto this link: (Again JitendraZaa he is genius)
http://www.jitendrazaa.com/blog/webtech/web/create-simple-drag-and-drop-widget-like-igoogle-using-jquery/
I will try that blog..
Thanks :-)
Please anyone knows " How to implement Drag n Drop functionality for div section in VFPage ..?"
In Jitendra Zaa's blog I found DnD for list but i want it for <div> or <<apex:outputPanel>
Try the following Code fro Drag and Drop <div> . I think it helps you.
<apex:page >
<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: 150px; height: 150px; 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>
<div id="draggable1" class="ui-widget-content">
<p>Drag me around 1</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>Drag me around 2</p>
</div>
<div id="draggable3" class="ui-widget-content">
<p>Drag me around 4</p>
</div>
<div id="draggable4" class="ui-widget-content">
<p>Drag me around 5</p>
</div>
</body>
</html>
</apex:page>