PDA

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



Rowan
10 Mar 2008, 3:16 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/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');
});

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

Hope this helps someone else

Rowan

Here is a demo please note the CSS messes up in IE6 as I havent got a PC

http://ext4sap.free.fr/sortable0.4.html

Thanks to Jelt for hosting it


Now updated to sortable0.6, please see the example HTML attached in the zip file, you'll need to update the Ext references in the header to your local version

Much improved event system, can pretty much listen on all events that are fired now.

Hope it helps

Rowan

fangzhouxing
16 Apr 2009, 11:02 PM
I have used this extension in my current project, it is great! @Rowan, Thank you very much!

My question: when will the event 'serialise' fire ?

Rowan
17 Apr 2009, 3:51 AM
Serialise fires when you call the serialise method, this means you can add a listener so any time someone calls the list you can fire an alert / message / save function / etc

fangzhouxing
21 Apr 2009, 1:30 AM
@Rowan,thanks for reply, but I still wondering the usage of 'serialise method', when should I use it?

Rowan
27 Apr 2009, 12:42 AM
When you want to get the data out of the list.

EG




var saveProcess = function(){


saveObj = myList.serialise();

ajaxsaveMethod(saveObj);

}



Would give you a list of all of the items in order.

julianpointer
20 May 2009, 9:07 PM
I want to be able to drag the same element over and over and add it to multiple dropzone.
Is this possible? I have tried a few way to get this working without success.

I have a list of people names that I want to drag onto activity lists, I need to add the names to many lists.

Rowan
21 May 2009, 10:23 AM
You could do something at about line 345 in my extension like this



notifyEnter : function(source, e, data){
this.srcEl = Ext.get(data.ddel);
if(this._testDDGroup()){
if(this.srcEl !== null){
if(this.srcEl.dom.parentNode !== this.el.dom){
if(!Ext.query(this.queryString,this.el).length > 0 && this.srcEl.is(this.queryString)){
//this.srcEl.appendTo(this.el);
this.newEl = Ext.get(this.srcEl.dom.cloneNode(true));
this.newEl.appendTo(this.el);
}
}
//add DD ok class to proxy
if(this.overClass){
this.el.addClass(this.overClass);
}
return this.dropAllowed;
}
}
},


Then you just need to add in some stuff to register the new element with the DD manager and show the original one. Also need to remove from the DOM if you decide not to drop it there.

Could be a bit of a pain to write.

Hope that somehow helps a little

Rowan

ives
26 May 2009, 12:16 AM
how can I implement the event after drag and drop, for example, when I drag a block to another block and after drop it, I can call a function(ajax) to update the data of database.
Can you give a simple sample?

thanks

Rob_mac
23 Jun 2009, 7:33 AM
I'm trying to understand what I can do with the Ext.ux.Sortable extension and have found that if I wrap a label with the html LABEL tags, then drag cannot be initiated on the label. In the code below I have one label/input that wraps its label and one that doesn't. The one that doesn't can be dragged on its label whereas the one that does can't. Any ideas why and/or whether this is something easy to resolve? Thanks for any help you can give. :-?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<style type="text/css">
body {
width : 800px;
margin :20px auto;
}

li {
padding :4px;
list-style:none;
list-style-type:none;
}

#sortable1 li {
cursor : move;
}

#sortable1 li:hover {
background-color: #DFE8F6;
}

#sortable1 input {
cursor : move;
}
.information {
background:#efefef;
padding:5px;
}

.information p {
margin:0;
}

.information .code {
background :white;
padding:4px;
margin:5;
}

</style>

<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script src="sortable.js" type="text/javascript"></script>
</head>
<body>

<h1>Sortable list</h1>
<br/><br/>

<form class="icmform">

<fieldset id="fieldset1">
<legend><span>Fieldset</span></legend>
<ol id="sortable1">
<li id="field1">
LABEL1<input type="text" id="field1" name="field1" value="value one" readonly />
</li>
<li id="field2">
<label for="field2">LABEL2</label><input type="text" id="field2" name="field2" value="value two" readonly />
</li>
</ol>
</fieldset>

</form>

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

</body>
</html>

Rowan
23 Jun 2009, 10:35 AM
Ive fixed my code to enable you to drag on child nodes, theres an optional parameter of queryDepth which is set as 5 as default, this means that it will get a draggable object from up to 5 nodes deep.

IE


<li>
<form>
<label>
<input />
</label>
</form>
</li>


Works with this page, ive updated the zip to 0.6 you were using the oldest code I think.

Attached is your file working, one thing was that you had multiple IDs but I think this wasnt the issue, it was a code thing on my side.

Hopefully better for everyone now.

PS Youll have to change your JS references back


You can now add listeners to functions as I get a lot of requests for how to add listeners to the drop / drag events. This is duly noted in the examples in sortable0.6.html

If you dont understand how to kick off the events then you will have to look at other examples of ext.observable.

Hopefully this will make sense to anyone using Ext, and should make DD easier to use.
Hope it helps,

Rowan

Rowan
23 Jun 2009, 10:43 AM
how can I implement the event after drag and drop, for example, when I drag a block to another block and after drop it, I can call a function(ajax) to update the data of database.
Can you give a simple sample?

thanks

Get the latest code in this thread 0.6




myList.on('endDrag',function(){
AJAXFUNCTION(this. serialise());
});

myList2.on('notifyDrop',function(){
AJAXFUNCTION(this.serialise());
});

Rob_mac
24 Jun 2009, 12:33 AM
That's great - thank you very much for your help.

Rowan
24 Jun 2009, 10:09 AM
No Problem, if you need anything just write on here or send me a PM

Rowan

Rob_mac
25 Jun 2009, 6:24 AM
Another question!

Is Ext.ux.Sortable intended to cope with nested sortables? For example, a list within a list? Or, as in the case below, a sortable list within a sortable set of fieldsets? In the case below, it seems to pretty much work except that you can sometimes drag a list item to the top-level where it gets stuck, and you can also sometimes drag one fieldset inside the other.

A bit of investigation seems to indicate that the destEl within the onNodeOver function ends up as a FIELDSET rather than an LI, when managing to drag an LI to the top-level. And an LI rather than FIELDSET when managing to drag one FIELDSET into the other. The insertBefore/insertAfter then end up placing the dragged item in the wrong place. However, not quite sure what to do about this.

This seems easier to recreate in Firefox than IE, by the way. Thanks again for any pointers/help you can provide.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />

<style type="text/css">
body {
width : 800px;
margin :20px auto;
}

form {
min-height:500px;
_height:500px;
}

fieldset {
min-height:150px;
_height:150px;
}

ol {
min-height:50px;
_height:50px;
list-style:none;
list-style-type:none;
}

li {
padding :4px;
list-style:none;
list-style-type:none;
}

#sortable1 li, #sortable2 li, #sortable1 input, #sortable2 input {
cursor : move;
}

#sortable1 li:hover, #sortable2 li:hover {
background-color: #DFE8F6;
}

.information {
background:#efefef;
padding:5px;
}

.information p {
margin:0;
}

.information .code {
background :white;
padding:4px;
margin:5;
}

.handle {
cursor : move;
}

.handle:hover {
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}
</style>

<script type="text/javascript" src="http://extjs.cachefly.net/builds/ext-cdn-771.js"></script>
<script src="sortable0.6.js" type="text/javascript"></script>
</head>
<body>

<h1>Sortable list</h1>
<br/><br/>

<form id="form1">

<fieldset id="fieldset1">
<legend><span id="handle_fieldset1" class="handle">Fieldset 1</span></legend>
<ol id="sortable1">
<li id="sortable1_1">
<label for="sortable1_field1">LABEL1</label><input type="text" id="sortable1_field1" name="sortable1_field1" value="value one" readonly />
</li>
<li id="sortable1_2">
<label for="sortable1_field2">LABEL2</label><input type="text" id="sortable1_field2" name="sortable1_field2" value="value two" readonly />
</li>
</ol>
</span>
</fieldset>

<fieldset id="fieldset2">
<legend><span id="handle_fieldset2" class="handle">Fieldset 2</span></legend>
<ol id="sortable2">
<li id="sortable2_1">
<label for="sortable2_field1">LABEL1</label><input type="text" id="sortable2_field1" name="sortable2_field1" value="value one" readonly />
</li>
<li id="sortable2_2">
<label for="sortable2_field2">LABEL2</label><input type="text" id="sortable2_field2" name="sortable2_field2" value="value two" readonly />
</li>
</ol>
</fieldset>

</form>

<script type="text/javascript">
var sortableTop = new Ext.ux.Sortable({
handles : true,
container : 'form1',
tagName : 'fieldset',
dragGroups : [ 'fieldsets' ]
});

var sortable1 = new Ext.ux.Sortable({
handles : false,
container : 'sortable1',
dragGroups : [ 'fields' ]
});
var sortable2 = new Ext.ux.Sortable({
handles : false,
container : 'sortable2',
dragGroups : [ 'fields' ]
});
</script>

</body>
</html>

Rowan
25 Jun 2009, 11:41 AM
I can see what the problem is, I'm just looking into it now.

Rob_mac
29 Jun 2009, 3:09 AM
...once again! :)

Righi
7 Jan 2010, 10:43 AM
Hi Rowan,

First of all, very nice plugin. Congratulations.

I'm trying to use your plugin with Extjs form fields.
First I have to create an empty formPanel. This is causing an error.
Then I have to create, dynamically, some formFields (text, grids, etc...), then I'll let the user reposition this fields on the formPanel, on the position the user wants. This will be a tool to create forms dynamically.
I'm in trouble, because I'm using sortable with div's, and not li's, for container, and then I have to get inside this div another div with x-panel-form class to get the sortable item. This is not working. I'm trying to insert items after sortable is created, but I can't.

Do you have some idea of what is happening?

PS. I'm using ExtJS 3.1.

hitekshu
28 May 2010, 9:36 PM
I have seen your example and it is very interesting. I am adding li nodes on the fly and would like them to get sorted as well. But the class enables sorting for only those li nodes that were present during page load.

Please help

nuwansh
24 Jul 2010, 7:36 AM
I am very new to ExtJs. I use this Sortable.js extension to arrange table row items. But I need to remove the status indicator element, (I mean the element cloned and triggered with mouse).

Thanks.

bryall
30 Sep 2010, 11:47 AM
I've run into this same issue, was there a resolution ever found on this?

sbuemaint
1 Oct 2010, 6:27 AM
I changed some code in the onNodeOver and _testDDGroup functions to check if the node being dragged over is part of the same group.

There was also a couple of syntax errors in this code:
if (this.horizonatal) as well as
if(this._testDDGroup) instead of
if(this._testDDGroup())

I attached a sample page along with updated code that shows a list nested within another list's last element. If you try to drag an element from the first list into the nested list it will prevent from doing so. Before it would allow you to drop into the nested list.