Very simple drag/drop example?

**acarapetis** · 3 Jul 2008 4:17 PM

This is probably a lot easier than it seems, but I'm having a lot of trouble finding a simple example of drag-and-drop panel swapping - all the working Ext 2.x examples I've found have been working on pre-placed <ul><li> DOM structures and I can't seem to bend them to work with procedurally generated panels.

Everything else in Ext seems to have excellent, simple examples that are very easy to comprehend and modify, so I'm surprised I can't find a usable example - hopefully someone can point me to one or help me out.

All I need is a few panels in a column that I can swap around: something very similar to http://ext4sap.free.fr/sortable0.4.html but working on panels generated in Ext.onReady. I imagine the Ext.dd.DragDropMgr.swapNodes() function would be handy here. I've tried setting draggable: true, and got the panels to be "draggable" and I can move the ghost, but (of course) it simply disappeared with no change on release, and I couldn't get swapping to work on the endDrag event function.

Here's a basic sample page that if I can get working, I should be able to expand to the application I need:

Code:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>DD Test</title>
<link rel="stylesheet" type="text/css" href="/lib/ext2/resources/css/ext-all.css"/>
<script type="text/javascript" src="/lib/ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/lib/ext2/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
    Ext.QuickTips.init();

    new Ext.Panel({
        renderTo:'edit', 
        title:'Test 1', 
        html: 'Big Test'
    })

    new Ext.Panel({
        renderTo:'edit', 
        title:'Test 2', 
        html: 'Another Test'
    })

    new Ext.Panel({
        renderTo:'edit', 
        title:'Test 3', 
        html: 'Last Test'
    })

});
</script>
</head>
<body>
<div id="edit">
</div>
</body>
</html>

Thanks for your time.

**ankri** · 3 Jul 2008 5:57 PM

check the portal example in your examples folder. It helped me fixing my problem.

**acarapetis** · 3 Jul 2008 6:02 PM

I did have a look at the portal example, but I couldn't quite work out what was relevant: there seemed to be an awful lot of code, and it wasn't clear what was directly required for the drag-drop reordering, and what was there to implement the multi-column changing functionality.

**Animal** · 3 Jul 2008 11:50 PM

What to you want to do? Just move Panels around?

**Event Horizon** · 4 Jul 2008 12:45 AM

The OP (I work with him), wants to drag a panel from it's current position, and drop it into another position and have it stay in that new position. (Rather like the example at http://ext4sap.free.fr/sortable0.4.html )

We would then detect that the order of the panels has changed and send information about the new order of the panels to our server code.

**Animal** · 4 Jul 2008 1:16 AM

Like this?

http://extjs.com/forum/showthread.php?t=29033

**acarapetis** · 4 Jul 2008 2:36 AM

Animal: I attempted to implement that extension, but ran into a problem... I posted in that thread.

**npintos** · 4 Jul 2008 3:50 AM

My application needs the same as yours, i.e. letting the user sort 'things' and update this order on the server. Browsing and re-browsing i found this:

http://tof2k.com/ext/sortable/
(you need to extract the styles for drag and drop directly from the page source)

here:

http://extjs.com/forum/showthread.php?t=33857

i'm still testing it but at least it renders correctly! Just change ViewPort for panel, and omit the contentEl parameter.

**Event Horizon** · 9 Jul 2008 12:05 AM

http://extjs.com/forum/showthread.php?t=33857

i'm still testing it but at least it renders correctly! Just change ViewPort for panel, and omit the contentEl parameter.

That's a useful extension, but I don't think it applies directly to what we are hoping to achieve.

if I understand the SortableDataView correctly, it's designed to provide drag and drop sorting of records in a store associated with a DataView.

The changes you're recommending would only provide drag and drop sorting of the same records in a store associated with a DataView inside a panel.

We want to be able to drag and drop the panels themselves.

I'll keep looking....

**Animal** · 9 Jul 2008 1:39 AM

Like this then: http://extjs.com/deploy/dev/examples/portal/portal.html

?

Very simple drag/drop example?

Thread Tools

Search Thread

Display

Very simple drag/drop example?

Very simple drag/drop example?