+ Start a Discussion
Puja Patil 13Puja Patil 13 

Drag n Drop functionality

How to implement Drag n Drop functionality for div section in VFPage ..?
Best Answer chosen by Puja Patil 13
Puja Patil 14Puja Patil 14
Hi Puja,

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

Virendra ChouhanVirendra Chouhan
Hi Puja,

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/
Puja Patil 13Puja Patil 13
Hi Virendra,

This blog is for drag n drop file /image. I want code drag-drop fields on vfpage.
Virendra ChouhanVirendra Chouhan
Oh i see!!! 

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/
Puja Patil 13Puja Patil 13
Really...!!
I will try that blog..

Thanks :-)
Puja Patil 13Puja Patil 13
Hi,
        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>

 
Puja Patil 14Puja Patil 14
Hi Puja,

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>
This was selected as the best answer