Drag And Drop UI Layouts Using JQuery

Feb 17, 2011

For our next project (a small app in ASP.NET/C#) we have to create drag and drop zones in the UI so that components/widgets can be dragged and dropped and layouts can be changed dynamically (for example, the user should be able to switch between two-column to a three-column layout from the front end). After doing some searching, I got to know that there are two approaches: Use Web parts and Content-zones. Using jQuery.

I also learnt that jQuery approach is preffered, but I would like to know how can I create such zones in my application and also save these zones per user (in the D so that when the new request comes for that user their preferred layout is displayed? I basically want to know if there are some tutorials on creating persistable drag and drop zones using jQuery.

View 3 Replies


Similar Messages:

JQuery :: Link Button OnClick Event Does Not Fire On First Click After Jquery Drag And Drop?

Dec 24, 2010

I have a link button in a repeater control. the li element is drag and droppable using jquery. when the page loads the the link button works perfectly, the jquery that is attached and the server side code both execute. when I perform a drag and drop then click on the link button it doesnt not fire. when i click it a second time it does fire. If i perform 2 or drag and drops in a row the link button doesnt fire a as many drag adn drops as i before it will fire. for example if if perform 3 drag and drops then it will take about 3 click before the events are fired.

[Code]....

View 4 Replies

JQuery :: Drag And Drop Using Jquery In Repeater / Datalist?

Jan 21, 2011

My scenario is to drag an item from a repeater/datalist to another repeater(preview repeater). The preview repeater already contains some icons in some positon(for eg. in 1st and 4th items). I need to insert the icon to empty positions(2nd, 3rd and 5th items) in preview repeater.

View 4 Replies

JQuery :: Drag And Drop Listbox?

Mar 4, 2011

I hav two listboxes, how can i drag and drop between these two using jquery

View 4 Replies

How To Call Jquery Drag And Drop Function

Dec 28, 2010

his function takes an li element and adds it to another ul element. After this code is fired the jquery events attached to the children spans of the li element do not fire the first time they are clicked.

View 2 Replies

JQuery :: Get Video Path During Drag And Drop?

Dec 23, 2010

I want to perform drag and drop operation on video file ,in which i want to make video carosual for all video and drag the video to the main player and play on main player.

View 2 Replies

Drag Drop Switch Content JQuery?

Aug 16, 2010

I want to make content switch say there are 3 items.. Item 1, Item2, Item3 in datalist and if i drag Item 1 to item 3, the content will interchange..."item 3" will go to "item 1" and "item 1" to "item 3" What code do i write in drop function. Here is my code. Is this even possible?

Default.aspx
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>[code]....

View 4 Replies

JQuery :: Implement A Drag And Drop Feature Into Website

Feb 13, 2011

implementing a drag and drop feature into my website. I was wondering if anyone has any good examples on how this can be done?

View 3 Replies

JQuery :: Developing Interface With Drag And Drop Like Igoolge

Jul 16, 2010

I need to develope interface something like IGoogle with drag and drop of boxes in ASP.Net 2.0. The interface should support cross browser compatibility.

View 1 Replies

JQuery :: How To Upload A File Using Drag And Drop From Windows To Browser

Mar 4, 2011

I would like to ask we select a file in our system and drag that file into browser, drop that file into particular location of the browser at that time the file is to upload.

View 4 Replies

JQuery :: Drag And Drop Treeview Node To Textarea In Web Forms?

Sep 8, 2010

We have an asp.net treeview control and a texarea. The childnodes of treeview need to be draggable and can be dropped into txtarea.

View 2 Replies

Data Controls :: Drag And Drop Cells In GridView Row Using JQuery?

Dec 13, 2013

I need to change the cell postions of the gridview via drag and drop.

View 1 Replies

Data Controls :: Drag GridView Row And Drop It In DetailsView Using JQuery

Dec 16, 2012

I require a drag and drop functionality between a ASP.NET grid view and a details view. I used jQuery draggable and droppable functionality to drag a row from gridview based on css class and added it to a second grid view. But now I want to drag single row of grid view and manipulate its contents to display it in details view. I have pasted my existing jQuery script that allows me to drag a column from one gridview and paste it to another of the same structure,

<script type="text/javascript">
$(document).ready(function () {
$('.block').draggable({

[Code] ....

View 1 Replies

Web Forms :: Onclientclick Onclick Method Does Not Fire After A Jquery Drag And Drop?

Dec 27, 2010

I have a linkbutton whose onclick method does not fire after a jquery drag and drop, the onlclientclick does work. Y would the server side code not work only after a jquery drag and drop?

View 4 Replies

Save The Order Of List To The Sql Server Database In Jquery Drag & Drop

Nov 5, 2010

I wanna save the order of my list to the sql server database in jquery drag & drop using asp.net c#. How can I do this?

View 1 Replies

Data Controls :: Duplicate Row Validation In Drag And Drop GridView Rows Using JQuery

May 7, 2015

I have 2two gridview .If i have load same data from two gridvie after that i drap and drop one ID one grid to another grid that time ID same means it will show alert match or it will show not match alert using jquery.

View 1 Replies

Data Controls :: Disable Update Button When Reordering Is Not Modified In GridView Using JQuery Drag And Drop

Sep 20, 2015

When I Drag and Drop the gridview row record then update preference will be enable the Button(update preference). Otherwise it will be disable..

Please refer this link: [URL] ....

View 1 Replies

Implement Drag And Drop?

Feb 2, 2010

I want to implement some drag and drop behaviors in my ASP.NET app. Could someone point me in the right direction for some articles and samples? For example, one example of drag and drop I want to implement is for sorting things.

View 4 Replies

Web Forms :: Drag And Drop Between 2 Using VB

Jun 4, 2010

I currently have two listboxes and I use arrow buttons to move items from one list to another. Is there a way I could implement drag and dropping between those 2 listboxes.

View 3 Replies

Drag And Drop Dynamically In WPF

Mar 26, 2016

i've built a WPF application with two listBoxes.I managed to drag and drop elements from one listbox to the other, but it always gets added to the end/buttom of the second listbox.How can i drag and drop the element and place it in the other listbox, but where i want it to be, where the cursor is located/ponits and not in the end (as the last element).

View 1 Replies

Drag And Drop FileUpload Using WPF

Jun 18, 2012

In WPF I have a textBox . I need to drag and drop textfiles ie in notepad from desk top to textbox of wpf. I managed to get the contents of notepad to textbox. But I need file path to be in browser so that I can transfer files from client to client.

I need the file path instead.

privatevoid textBox1_PreviewDragEnter(object sender, DragEventArgse) {
bool isCorrect = true;
if (e.Data.GetDataPresent(DataFormats.FileDrop, true) == true
) {
string[] filenames = (string[])e.Data.GetData(DataFormats.FileDrop, true
);

[Code] ....

View 1 Replies

Web Forms :: Drag And Drop Between Two Controls?

Mar 24, 2010

Anyone who can give me a tip on articles explaining how I can implement a drag n drop functionality between two asp controls? I'm using Asp.net 3.5.

View 1 Replies

Web Forms :: WebPart Drag And Drop?

Feb 17, 2011

I cannot get the Drag and Drop functionality of Web Parts is to work. I have a very simple test page with two WebPartZones.. In the OnInit method of the code behind I put the page in design mode. In the first zone I have a textbox.At runtime the text box renders as a web part. When I hover over the web part header my mouse pointer changes the 'move' pointer, but I cannot drag the item. I do not see it dragging and the part never moved. I am using Visual Studio 2010 with IE 8. I have tried IE8 in compatibility mode and regular mode. The results are the same. Here is the markup from my test page:

<form id="form1" runat="server">
<div>
<asp:WebPartManager ID="WebPartManager1" runat="server">
</asp:WebPartManager>
<asp:WebPartZone ID="LEFT" runat="server">
<ZoneTemplate>
<asp:TextBox ID="tb" runat="server" />
</ZoneTemplate>
</asp:WebPartZone>
aa
<asp:WebPartZone ID="RIGHT" runat="server">
</asp:WebPartZone>
aa
<asp:EditorZone ID="EditorZone1" runat="server">
</asp:EditorZone>
</div>
</form>

Here is the code behind:

protected override void OnInit(EventArgs e)
{
base.OnInit(e);
WebPartManager mgr = WebPartManager.GetCurrentWebPartManager(this);
mgr.DisplayMode = WebPartManager.DesignDisplayMode;
}

What am I missing?

View 2 Replies

Drag And Drop - Able Organization Chart

Jul 26, 2010

I have to generate an organization chart, in my asp.net application and it should supports drag and drop feature to update the linkage between organization structure. What would be the best way to deal with it, (jQuery or silver light or .net chart controls). My primary needs is to support drag and drop.

View 4 Replies

Drag Drop Items Within ListView

Mar 11, 2011

I have a listview showing images like ImageViewer and I want to implement Drag-Drop behavior within ListView. how can i achieve the Srag-Drop inside the below kind of customized ListView.

<asp:ListView ID="lvPhotoViewer" runat="server" GroupItemCount="3" InsertItemPosition="LastItem">
<LayoutTemplate>
<table id="groupPlaceholderContainer" runat="server" border="1">
<tr id="groupPlaceholder" runat="server">
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<td id="Td4" align="center" style="background-color: #eeeeee;">
<asp:Image runat="server" ID="imPhoto" Height="100px" Width="100px" ImageUrl='<%# "~"+Eval("PhotoUrl") %>' />
<br />
<asp:Label ID="DefaultPhotIDLabel" runat="server" Text='<%# Eval("PhotoName") %>' />
</td>
</ItemTemplate>
<GroupTemplate>
<tr id="itemPlaceholderContainer" runat="server">
<td id="itemPlaceholder" runat="server">
</td>
</tr>
</GroupTemplate>
<InsertItemTemplate>
<td id="Td3" width="150px" height="150px" runat="server" align="center" style="background-color: #e8e8e8;
color: #333333;">
<asp:FileUpload ID="fileUpload" runat="server" />
</td>
</InsertItemTemplate>
</asp:ListView>
Code Behind:
public class ImageEntity
{
public string PhotoName { get; set; }
public int PhotoIndex { get; set; }
public string PhotoURL { get; set; }
}
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
IList<ImageEntity> imagesList = new List<ImageEntity>()
{
new ImageEntity(){ PhotoName="House1", PhotoIndex=1, PhotoURL= @"ImagesHouse-01.JPG" },
new ImageEntity(){ PhotoName="House2", PhotoIndex=2, PhotoURL= @"ImagesHouse-05.JPG" },
new ImageEntity(){ PhotoName="House3", PhotoIndex=3, PhotoURL= @"Imageshouse.jpg" },
new ImageEntity(){ PhotoName="House4", PhotoIndex=4, PhotoURL= @"Imageshouse2.jpg" }
};
lvPhotoViewer.DataSource = imagesList;
lvPhotoViewer.DataBind();
}
}

View 1 Replies







Copyrights 2005-15 www.BigResource.com, All rights reserved