function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
KamindiaKamindia 

Drag and drop option with VisualForce

Hello,

Can anybody tell me is there any drag and drop option is available to generate User interface.

As writing the html/XMl tag is required more knowledge.

 

Regards

Kam

 

kiranmutturukiranmutturu

natively its not there you need to write the entire code with your hand......but some appexhange products are there for trail check out this
harsha__charsha__c

Hi 

 

This can be achieved by embedding html into the VF page..!

There are examples for Drag and Drop in jqueryui.com where with Html

 

You can download the required sources of it and you can embed it in the VF page
harsha__charsha__c

For your reference, I have a sample code for this, which I implemented..!

 

 

<apex:page showHeader="false" standardStylesheets="false" cache="false">

	<!-- Including CSS files --> 
		<apex:styleSheet value="{!URLFOR($Resource.DragAndDrop2, 'themes/base/jquery.ui.all.css')}"/>   
		<apex:styleSheet value="{!URLFOR($Resource.DragAndDrop2, 'demos.css')}"/>
	<!-- End of Including CSS files -->
	
	<!-- Including JS files -->
		<apex:includeScript value="{!URLFOR($Resource.DragAndDrop2, 'js/jquery-1.3.2.js')}"/> 
		<apex:includeScript value="{!URLFOR($Resource.DragAndDrop2, 'js/jquery-ui-1.7.2.custom.min.js')}"/> 
		<apex:includeScript value="{!URLFOR($Resource.DragAndDrop2, 'jquery-1.8.0.js')}"/>
		<apex:includeScript value="{!URLFOR($Resource.DragAndDrop2, 'jquery.ui.position.js')}"/>
		<apex:includeScript value="{!URLFOR($Resource.DragAndDrop2, 'jquery.ui.core.js')}"/>
		<apex:includeScript value="{!URLFOR($Resource.DragAndDrop2, 'jquery.ui.widget.js')}"/>
		<apex:includeScript value="{!URLFOR($Resource.DragAndDrop2, 'jquery.ui.mouse.js')}"/>
		<apex:includeScript value="{!URLFOR($Resource.DragAndDrop2, 'jquery.ui.draggable.js')}"/>
		<apex:includeScript value="{!URLFOR($Resource.DragAndDrop2, 'jquery.ui.droppable.js')}"/>
		<apex:includeScript value="{!URLFOR($Resource.DragAndDrop2, 'jquery.ui.resizable.js')}"/>
		<apex:includeScript value="{!URLFOR($Resource.DragAndDrop2, 'jquery.ui.dialog.js')}"/>
		<apex:includeScript value="{!URLFOR($Resource.DragAndDrop2, 'jquery.ui.resizable.js')}"/>
	<!-- End of Including JS files -->
    <style>
	.draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
	.ui-widget-header p, .ui-widget-content p { margin: 0; }
	#snaptarget { height: 140px; }
	</style>
    <script>
    	$(function() {
		$( "#draggable" ).draggable({ snap: true });
		$( "#draggable2" ).draggable({ snap: ".ui-widget-header" });
		$( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" });
		$( "#draggable4" ).draggable({ grid: [ 20,20 ] });
		$( "#draggable5" ).draggable({ grid: [ 80, 80 ] });
	});
    </script>
   
    	<div class="demo">
	
<div id="snaptarget" class="ui-widget-header">
	<p>I'm a snap target</p>
</div>

<br clear="both" />

<div id="draggable" class="draggable ui-widget-content">
	<p>Default (snap: true), snaps to all other draggable elements</p>
</div>

<div id="draggable2" class="draggable ui-widget-content">
	<p>I only snap to the big box</p>
</div>

<div id="draggable3" class="draggable ui-widget-content"> 
	<p>I only snap to the outer edges of the big box</p>
</div>

<div id="draggable4" class="draggable ui-widget-content">
	<p>I snap to a 20 x 20 grid</p>
</div>

<div id="draggable5" class="draggable ui-widget-content">
	<p>I snap to a 80 x 80 grid</p>
</div>

</div><!-- End demo -->
    	

</apex:page>

 If this fixes your problem, then mark it as solution for other's reference..!
Nirav Devcg5Nirav Devcg5
Hi Harsha
Where can I find the 'demos.css'? I tried to use this code in my VF Page but this code is not working. I had downloaded all the JQuery and the 'jquery.ui.all.css' but I can't find the 'demos.css'. The code is also not working in my VF page but I think that this is because of 'demos.css which I haven’t added.

So, can you please tell me from where I can find that CSS it's very urgent
Please give the solution ASAP

Thanks in Advance
Nirav
vinnusfvinnusf
@harsha

Hi can you pls provide the static resource files you are using in your sample. Its urgent

Thank you.