PDA

View Full Version : [1.1,2.0] Ext.ux.Sortable - Simple Drag Drop implementation



Rowan
10 Mar 2008, 4:13 PM
Hi Everyone, this is my first go at an Ext-ension as such - been using the library for about a year and constantly get PM's about how to set up DragDrop, how to use handles, DD Groups etc.

This isn't the definitive plugin by any means but thought I would add something to the community as I would not have been able to do my job without it.

What is it?

This is a DD Class that enables DD on a container with custom events to listen to.

What can it do?

Create DD, disable DD, Add and element, remove an element, lock, unlock, do the dishes and more.

Chuck this above your Ext Directory in order to get the demo working, sorry I have no web space these days for a demo.

http://extjs.com/learn/Extension:Sortable (http://extjs.com/forum/../learn/Ext_Extensions:Sortable)

Usage



function contextAlert(){
alert('Im a right click, look at me!')
};

var sortable1 = new Ext.ux.Sortable({
container : 'sortable1',
handles : true,
contextMenu : contextAlert
});

sortable1.on('serialise', function(){
alert('He slimed you');
});

var sortable3 = new Ext.ux.Sortable({
container : 'sortable3',
handles : true,
horizontal : true,
DDGroupName : 'sideways'
});


If anyone needs any help feel free to PM me or post on here

Hope this helps someone else

Rowan


Release notes 0.45
Switch enable functions id calls back to using IDs or Dom reference, changed by error

Release notes 0.4

Fixed bug with onunload event, added override for Ext base function, could maybe add to official Ext build
Added in fix for IE6 radio buttons by Jelt
Added reference to serialize for our American friends, event added as serialize too.

Demo - CSS is wrong in IE6 but gives an idea on how to use it
http://ext4sap.free.fr/sortable0.4.html

krycek
10 Mar 2008, 4:48 PM
hi,
does it work just for vertical dd?

Rowan
12 Mar 2008, 12:11 AM
You could easily use it for horizontal, just change where the XY is listed as GoingUp / GoingDown and set your CS accordingly.

I will edit it later for you, I have never had a use for Horizontal but will add it in.

Great idea, thanks.

Rowan
12 Mar 2008, 12:30 AM
Added in horizontal ability and put example in the code.

Thanks

Rowan

krycek
12 Mar 2008, 5:01 AM
I have changed a function in your extension to work with horizontal and vertical without any parameter:



onNodeOver : function(n, dd, e, data)
{
if(this.groups[Ext.dd.Registry.getTarget(this.srcEl.id).ddGroup])
{
var dragEl = n.ddel;
if (Ext.lib.Dom.getX(this.srcEl) > Ext.lib.Event.getPageX(e))
this.goingPrevious = true;
else
this.goingPrevious = Ext.lib.Dom.getY(this.srcEl) > Ext.lib.Event.getPageY(e)? true : false;

var destEl = Ext.get(n.ddel);
//see if this exists
if(this.srcEl !== null)
{
if (destEl.is(this.queryString))
{
if (this.goingPrevious)
{
// insert before
this.srcEl.insertBefore(destEl);
} else {
// insert after
this.srcEl.insertAfter(destEl);
}
}
}
return this.dropAllowed;
}
else
{
return this.dropNotAllowed;
}
}


To test it you must change the css "ul.horizontal" to:


ul.horizontal {
background: black;
min-height:220px;
}


Tested only in FF2.

Rowan
12 Mar 2008, 10:09 AM
Couldn't that be an issue if you were over a node and accidentally moved left?

Otherwise I will add it in.

I have some more ideas about how to extend this but it's a case of finding time to implement them.

also is this function in Ext 1.1?

Ext.lib.Dom.getX(this.srcEl) > Ext.lib.Event.getPageX(e)

krycek
12 Mar 2008, 11:19 AM
I don't know what do you mean with "accidentally moved left". The way that I've test it you can configure the direction ("vertical" or "horizontal") in the css. So you can have, for example, 8 <li>'s with 4 <li> per line and move them in both sides.

And then If you want it to move vertically, for instance. You just need to change your css UL class to show only one <li> per line.

I can't say if it would work in Ext 1.1 since I've never used it.

krycek
12 Mar 2008, 11:32 AM
ohh... the parameter "queryString" is an selector to define which elements will be registered?
if so, is "container" param really necessary?

Rowan
12 Mar 2008, 2:00 PM
The container parameter isn't always necessary, it's there in case you want use a container to initialise the DD, it defaults to the body of the window.

The query string is based on a tag and class name - any combination will work. It's uses Ext.query to get the els so it's (tagName.className,container).

If you wanted to use the default values of document.body and LI you would not even need to set any params.




var sortable = new Ext.ux.Sortable();

All of the values used in the top of the extension are the defaults which are then over ridden by the parameters supplied.

The code above would enable a vertical list on all Li elements in the window.

I think I will leave the code the way it was as in my experience you use either a horizontal or a vertical list, if you want to use float left on elements then set it to be horizontal as this will enable sideways insertion. You may get confusion when using your way as you would still use insert before so when you would expect it to go abolve an element (for example in a grid) it would go to left.

You can always add in your own version of the DropZone in your own version if you feel that it works better your way. I think though its better to define your actions first. Also this plugin was designed to be cross Ext versions, I can't see those in 1.1 so I will leave alone for now.




var config = Ext.applyIf(obj,{
container : document.body,
className : null,
tagName : 'li',
handles : false,
contextMenu : false,
DDGroupName : 'draggable',
autoEnable : true,
horizontal : false
});


I have uploaded a slightly newer version as I noticed I was always setting the context menu listeners up with an empty function and there was an extra var named this.dropZone at the top of the function which was the over written.

Thanks

Rowan

krycek
12 Mar 2008, 4:20 PM
What about an option "direction" that could be "horizontal", "vertical" and "both"?

I asked about the container parameter because it could be set in the selector too.

But your extension will help me a lot. Thanks for sharing!

Rowan
13 Mar 2008, 2:38 AM
No problem mate, I will add something in to this later for you.

I think I have a plan that would suit your needs but I will need to do a little testing.

I deliberately put the container in there as with Ext.query I always use the container parameter and I thought it made it easier for people to understand what was going on when they used it.

craigharmonic
19 Mar 2008, 11:29 PM
I can't seem to get handles going when I use div's as the draggable elements. Would you mind providing some sample code?

craigharmonic
19 Mar 2008, 11:40 PM
Also sometimes when I run your sortable.html page I get an error:

drags is not defined
enable()sortable.js (line 94)
Sortable(Object container=sortable3 handles=true horizontal=true)sortable.js (line 32)
sortable.html()sortable.html (line 225)
[Break on this error] Ext.dd.Registry.register(drags[i], {

Other times it works perfectly and I haven't made any modifications to the code.

Rowan
21 Mar 2008, 4:00 AM
I think there were some bugs in the code - I have just posted a newer version which works fine with the example shown.

Make sure you set the tagName to Div and use the id of the div prefixed with handle for the handle ID.

Hope that helps.

Changes :

DDGroupName is now dragGroup and takes an array of values
swap() now needs from / to group name values but can take arrays of values too.

New functions
addToDDGroup
removeFromDDGroup

Both take arrays of values so you can now use multiple groups with lists.

Changed for loops for negative while loops.

jsakalos
23 Mar 2008, 3:40 PM
Any online demo? Looks interesting so I'd like to see it in action but I'm too busy to prepare an application, a demo, myself... ;)

craigharmonic
23 Mar 2008, 7:48 PM
Rowan,

The problem seems to be fixed if I set contextMenu to something (I just set it too an empty function) if I remove it from the config then it doesn't seem to work. I have not yet tried version 0.3 but will do so shrotly and get back to you.

Rowan
24 Mar 2008, 6:13 AM
Haven't got any webspace at the moment unfortunately, you can just download the zip and put it above the Ext directory - it has a demo file in there for you.

Will try and find some space for it online.

craigharmonic
3 Apr 2008, 6:47 PM
Even when using version 0.3 I still get an error on some occasions:

this.ids[g] has no properties
[Break on this error] if (g && this.ids[g][oDD.id]) {

in ext-base.js

This only occurs sometimes. I can literally refresh the page and sometimes everything works fine, other times I get the error.

jelt
22 Apr 2008, 7:19 AM
Thank you for sharing, your ux is great !

I have a little issue to report :
When i drag an item which contain radiobutton, the radio is reset when i drop the item.

example :


<ul id="config_ul">
<li id="li_1"><span id="handle_li_1" class="handle">line 1</span><input type="radio" name="radio_test" value="1" id="radio_test_1" /></li>
<li id="li_2"><span id="handle_li_2" class="handle">line 2</span><input type="radio" name="radio_test" value="2" id="radio_test_2" /></li>
</ul>

<script type="text/javascript">
var sortable1 = new Ext.ux.Sortable({ container : 'config_ul', handles : true });
</script>

Rowan
12 May 2008, 12:29 AM
Sorry Craig I didnt see your message - I havent managed to see that one if you send me your script I will have a look when I get a chance.

I think radio buttons have issues when moved in the DOM that they reset, you may have to double check that but it sounds like that as the code certainly doesn't set any form values.

Again I will look at these tonight when I get home and see if I can work any of them out.

Rowan

craigharmonic
12 May 2008, 12:41 AM
Thanks Rowan, the error I reported occurs when using your example code under FIrefox 2.0.0.14. I was able to just refresh the example page and sometimes the error would appear (on load) and other times it wouldn't.

Hope this helps you track down the error on what is my favourite extension to Ext! I also ended up getting it working with Panels in the end and will post some examples for people shortly.

Rowan
12 May 2008, 1:35 AM
Excellent feedback thank you very much! I will look into that bug and let you know - sounds like the DOM isn't quite ready when it's trying to execute the code on the page. It might be worth adding an Ext.isReady() - im pretty sure thats what the onDOMReady is in Ext - wrapper to it.

jelt
13 May 2008, 12:51 AM
Thank you Rowan for your reply.

I completed the example (added <form> tag) and now, radio is kept in FF, but continue to be cleared with IE6.
In fact, after multiple test, radio is not "cleared", it is moved in this initial state, as you can see using this full example :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>radio button go back to initial state when moved</title>
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="sortable.js"></script>
<link rel="stylesheet" type="text/css" href="ext-all.css" />
</head>
<body>
<form name="myform" id="formid">
<ul id="config_ul">
<li id="li_1"><span id="handle_li_1" class="handle">line 1</span><input type="radio" name="radio_test" value="1" id="radio1" checked></li>
<li id="li_2"><span id="handle_li_2" class="handle">line 2</span><input type="radio" name="radio_test" value="2" id="radio2" ></li>
</ul>
</form>

<script type="text/javascript">
Ext.onReady(function(){
var sortable1 = new Ext.ux.Sortable({ container : 'config_ul', handles : true });
});
</script>
</body>
</html>I don't see what i'm doing wrong :-?

CutterBl
13 May 2008, 11:40 AM
Anybody ever find the cause/fix for this issue that Craig had?
+++++++++++++++++++++++++++++++++
Even when using version 0.3 I still get an error on some occasions:

this.ids[g] has no properties
[Break on this error] if (g && this.ids[g][oDD.id]) {

in ext-base.js

This only occurs sometimes. I can literally refresh the page and sometimes everything works fine, other times I get the error.

jelt
15 May 2008, 3:33 AM
Brian help me to solve the IE bug ! (http://www.extjs.com/forum/showthread.php?t=35475)

If you have the same problem, you can solve it by this way :

In Ext.extend(Ext.dd.SortableDragZone, Ext.dd.DragZone, {#})

replace the onInitDrag function by this one :

onInitDrag : function(x, y){
var dragged = this.dragData.ddel.cloneNode(true);
dragged.id='';

if(Ext.isIE){ //IE fix for checkbox and radio
var array_cb = Ext.fly(this.dragData.ddel).select('input[type="checkbox"]');
var array_rb = Ext.fly(this.dragData.ddel).select('input[type="radio"]');
var i = 0;
Ext.fly(dragged).select('input[type="checkbox"]').each(function() {
this.dom.defaultChecked = array_cb.elements[i].checked;
i++;
});
i = 0;
Ext.fly(dragged).select('input[type="radio"]').each(function() {
this.dom.defaultChecked = array_rb.elements[i].checked;
i++;
});
}

this.proxy.update(dragged);
this.onStartDrag(x, y);
this.dragData.ddel.style.visibility='hidden';
return true;
}This code correct the flying window.


and in Ext.extend(Ext.dd.SortableDropZone, Ext.dd.DropZone,{#})
replace the onNodeOver function by this one :

onNodeOver : function(n, dd, e, data){
if(this._testDDGroup()){
if(this.horizonatal) {
var x = e.getPageX();
if (x < this.lastX) {
this.goingPrevious = true;
} else if (x > this.lastX) {
this.goingPrevious = false;
}
this.lastX = x;
} else {
var y = e.getPageY();
if (y < this.lastY) {
this.goingPrevious = true;
} else if (y > this.lastY) {
this.goingPrevious = false;
}
this.lastY = y;
}
var destEl = Ext.get(n.ddel);

if((Ext.isIE)&&(this.srcEl !== null)){ //IE fix for checkbox and radio
this.srcEl.select('input[type="checkbox"]').each(function() {
this.dom.defaultChecked = this.dom.checked;
});
this.srcEl.select('input[type="radio"]').each(function() {
this.dom.defaultChecked = this.dom.checked;
});
}

if (this.goingPrevious) {
this.srcEl.insertBefore(destEl);
} else {
this.srcEl.insertAfter(destEl);
}
return this.dropAllowed;
} else {
return this.dropNotAllowed;
}
}This code correct the true move of the dragged element.

CutterBl
15 May 2008, 6:05 AM
While I appreciate your additions/changes, I am still getting this error, occasionally, in IE and FF (through Firebug):


this.ids[g] has no properties
[Break on this error] if (g && this.ids[g][oDD.id]) {...

jelt
15 May 2008, 6:30 AM
I have this error too... hope Rowan can help us :">

Lobos
15 May 2008, 10:38 AM
me too i get the error too :(

this.ids[g] has no properties
http://127.0.0.1/svn_corePHP/KFC/www/js/ext-2.0/ext-all-debug.js
Line 8270

Rowan
22 May 2008, 10:21 AM
Ok cool, I will look into this now, sorry guys I have been really busy working on the new DailyMail.co.uk website which is now live. Although a little heavy on CSS / page weight I think you can understand where the design is heading, it's a very different site to the rest of newspapers. Hope you can all have a play with it and see what you think. Don't worry about feedback on the normal web design type things - we know all about the issues. But on the whole I am very proud of the achievements included with launching it.

We have a full Ext based content management system behind it which is absolutely critical in delivering such a modular site. I will try to post some videos if I am allowed.

Anyway, back to DD bug fixing!

Rowan
22 May 2008, 12:13 PM
It seems like it is to do with unload function of Ext.dd.DragDropMgr - I can only recreate this sometimes which seems to me like it's trying to unload the els after the page has itself unloaded them causing reference errors.

I will keep looking in to it and see what I can do, I don't really want to override that function as it is used for memory / garbage collection from what I can tell.

Rowan
22 May 2008, 12:54 PM
Fixed the bug with this code, was the unload handler unloading after the dom had so was an error from the previous page when you refreshed.




//Ext override to stop error when unloading a page
Ext.dd.DragDropMgr._remove = function(oDD) {
if(oDD){
for (var g in oDD.groups) {
if(this.ids[g]){
if (g && this.ids[g][oDD.id]) {
delete this.ids[g][oDD.id];
}
}
}
delete this.handleIds[oDD.id];
}
}



There is a new build 0.4 with this in, Jelt's fix for IE and a reference to Serialize, also fixed a bug where the Serialise event wasn't firing by default.

craigharmonic
22 May 2008, 4:48 PM
Thanks for all your help with your great extension, and brilliant work on the Daily Mail website Rowan! I've been meaning to post my example of using sortable with panels, when I implement this new version I'll make some example code to post.

jelt
22 May 2008, 11:12 PM
Thanks Rowan, your fix seem to work :)

I want to inform you I use your plugin in mine : http://www.extjs.com/forum/showthread.php?t=36335

The 0.4 introduce many little changes, and it cause troubles to my implementation :
After disabling the DD, when i re-enable it nothing append.

For the moment i will stay at the 0.3 level (patched with your lattest code), and i will try to understand what i need to change...

Rowan
23 May 2008, 4:19 AM
I will have a look into your extension over the weekend and see if I can fix whatever new bug I have introduced. The only thing I can think it could be is the over ride on the unload handler but I will investigate for you, I did change some stuff to do with ids though, Im sure it wont be too hard to find.

Rowan
25 May 2008, 4:25 AM
Have updated the function and switched back the enable function to how it was in 0.3, this was a mistake left in when debugging. I think it should fix your issue Jelt.

jelt
25 May 2008, 11:50 PM
Nice :)
It's ok now, i update mine.

Thank you rowan =D>

Rowan
27 May 2008, 1:39 PM
Excellent work there, please can you make sure that the post links back to this one, just to make sure that anyone using it can update to the latest code.

Many thanks for using this extension.

Rowan

jelt
28 May 2008, 12:20 AM
url was in the code header, but you are right, better to add it in the post. Done now :)

Thanks for your good job Rowan, keep it up =D>

temporary
3 Jun 2008, 4:10 AM
This is really great :D

Is it possible to suppress the drag ghost? I have a rather complex panel that isn't displayed correct in the drag context... I'd like to suppress it or modify the ghost. I've never done DD in this depth before, so I don't know where to start..

Thanks!

temporary
3 Jul 2008, 6:47 AM
Has anyone ever tried Ext.form.HtmlEditor with Ext.ux.Sortable?

As soon as I move an editor instance around it isn't usable afterwards... Looking deeper into it, it seems like the body-tag of the editor-iframe gets messed up.

Someone got a solution?

ankri
3 Jul 2008, 7:51 AM
I think it's the same problem as collapsing and expanding a panel that has a html editor component in it.

acarapetis
3 Jul 2008, 8:24 PM
I was wondering if someone here could give me a hand with Sortable... I've got it working, but I have divs (Panel components) inside the <li>s that are draggable, and while if I have something else (ie text) directly in the <li> tag, I can drag from that: but I can't drag from any area covered by the panel. I tried adding the handle class to the toolbar and enabling the handles option, but it's not working.

Any tips?



<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" src="sortable.js"></script>
<script type="text/javascript">
var sp = new Ext.Panel({
id:'d1',
renderTo:'s1',
title: 'Test 1',
items: [{xtype:'textfield'}]
});

sp.getTopToolbar.addClass('handle');

var sortable = new Ext.ux.Sortable({
container: 'cont',
handles: true
});

</script>
</head>
<body>
<div id="edit">
<ul id="cont">
<li id="s1">1</li>
<li id="s2">2</li>
<li id="s3">3</li>
<li id="s4">4</li>
</ul>
</div>
</body>
</html>

jsakalos
4 Jul 2008, 12:08 AM
Sortable is ux (user extension) so its author knows most about it. The best is to post in his original thread or PM him on the matter. I personally know nothing about Sortable as I don't use it.

acarapetis
4 Jul 2008, 12:55 AM
Sortable is ux (user extension) so its author knows most about it. The best is to post in his original thread or PM him on the matter. I personally know nothing about Sortable as I don't use it.

Is this not the original thread? ;)

jsakalos
4 Jul 2008, 1:04 AM
Sorry, I've made a mistake, sure it is... :">

moegal
16 Jul 2008, 2:57 AM
How do I return the list of elements and their order. I tried sortable2.serialise() but it returns [object],[object],[object],[object] in IE7 and [object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement] in FF. An example would be helpful, still learning js and ext.

great extension.

Thanks, Marty

jelt
17 Jul 2008, 1:23 AM
You got an array of the ordered dom objects

example :
var list_sorted = sortable1.serialise();

list_sorted[0].id will give you the ID of the first element of your list.


You can Install firebug to help you to understand how to use the [object]

moegal
17 Jul 2008, 4:15 AM
that was it , thank you. great extension.

Marty

Rowan
6 Aug 2008, 2:40 AM
acarapetis

Adding the handle class to a toolbar wont work, you would need to add a div with an id that was handle_<ID of your parent div> with a class of handle.

Dragging divs from inside lists may be a pain as the script will insert the div next to the div that you dragged over rather than in the LI above.

moegal
12 Aug 2008, 3:20 AM
is there an event for enddrag or drop? I am not a js guru. Does not look like there is, any possibility to add these events?

It would be nice to directly fire off some code when an item is dropped.

Thanks, Marty

Rowan
12 Aug 2008, 7:04 AM
There would be on the individual element, you can set a listener using the registry function of drag drop manager

moegal
12 Aug 2008, 9:10 AM
Thanks, that is a little over my head at the moment. I will look at the docs and see what I can do.
Marty

temporary
2 Sep 2008, 7:58 AM
Is this still compatible with Ext 2.2? Or will there be a new version?

paladinjack
2 Sep 2008, 11:11 AM
I tested, it works with Ext 2.2
It doesn't work with div tags, it only works with li tags.

took me a while to figure out.

paladinjack
2 Sep 2008, 11:13 AM
The scriptaculous one supports the divs as tag names. However, i can't use them due to the weird issues about xhtml.

temporary
2 Sep 2008, 2:53 PM
Yea, got it working, too. I modified it to only create a placeholder ghost instead of a cloned node of the drag target.

But - I'm using it with divs, with no problem. But with a handler that is being dragged.

paladinjack
2 Sep 2008, 6:06 PM
wait, are you doing <div container><div child> ...
i actually read some of the source code, it read li as tag?

this is great user plugin but still can't beat the scriptaculous one, that's why i am still stick with prototype + ext + scriptaculous.




Yea, got it working, too. I modified it to only create a placeholder ghost instead of a cloned node of the drag target.

But - I'm using it with divs, with no problem. But with a handler that is being dragged.

moegal
3 Sep 2008, 5:03 AM
you can change the li to a div, that is what I did.
Marty

gludington
3 Sep 2008, 9:53 AM
Thanks, that is a little over my head at the moment. I will look at the docs and see what I can do.
Marty

There would be on the individual element, you can set a listener using the registry function of drag drop manager

In part because I am also new to extjs, rather than use the drag and drop registry , I added an "endsort" event by passing the sortable itself in the config to the dropZone. In other words, after adding endsort to the events, this:



_createDragDrop : function(){
this.dragZone = new Ext.dd.SortableDragZone(this.container, {ddGroup : this.dragGroups[0], scroll:false, containerScroll:true, queryString : this.queryString});
this.dropZone = new Ext.dd.SortableDropZone(this.container, {ddGroup : this.dragGroups[0], queryString : this.queryString, handles : this.handles, horizontal : this.horizontal, sortableContainer:this});
},
then allows, in notifyDrop:

notifyDrop : function(dd, e, data){
if(this._testDDGroup){
if(this.srcEl !== null){
this.srcEl.setStyle('visibility','');
// refresh the drag drop manager
Ext.dd.DragDropMgr.refreshCache(this.groupName);
this.sortableContainer.fireEvent('endsort', this.sortableContainer, dd, e, data);
}
return true;
}
},
Another entity can then listen for that endsort event, and have access to the sortable itself for serialization or other operations, as well as the drop event and data. Again, I am new to extjs, so, if this approach may seem naive or otherwise problematic, I would appreciate the criticism.

moegal
3 Sep 2008, 12:23 PM
gludington,
this helps, but how are you listening for the endsort event?

I have tried the following and it does not work.



var sortable2 = new Ext.ux.Sortable({
container : 'sortable2',
handles : true,
dragGroups : [
'notTheSameAsThatOne',
'sideways'
],
listeners: {
'endsort': function(myObj,dd,e,data){
//do something here
}
}
});

moegal
3 Sep 2008, 12:26 PM
oops spoke too soon, tried the following and it works.



sortable2.on('endsort',function(myObj,dd,e,data){
//do something here
});

felix085
9 Sep 2008, 3:15 AM
oops spoke too soon, tried the following and it works.



sortable2.on('endsort',function(myObj,dd,e,data){
//do something here
});

Hi,
This code not work! Please help me! :((

moegal
9 Sep 2008, 7:23 AM
The event fires for me.

Did you add all of the extra code?

felix085
9 Sep 2008, 7:35 AM
The event fires for me.

Did you add all of the extra code?
Yes,
I use it into DataView.

Code:


this.sortable = new Ext.ux.Sortable({
container : 'floatContainer',
tagName : 'div[class^=thumb-wrap]',
handles : true
});
this.sortable.on('endsort',function(myObj,dd,e,data){
console.log('test');
});

temporary
16 Dec 2008, 10:20 AM
Hi,

there are several bugs in 0.45. Is there a more recent version available?


Line 399: this.horizonatal instead of this.horizontal
Line 440: missing () on this._testDDGroup
Line 449: the complete function doesn't make sense.
It uses this.groups as the key-variable for all items inside groupTest. On the next line it uses this key to check wether this key exists in groupTest - which it does of course, since it is one of the keys from groupTest.