Sortable.create & reverteffect

Jon B.

unread,

Sep 10, 2009, 9:19:16 PM9/10/09

to Prototype & script.aculo.us

I'm trying to use the reverteffect option on a sortable and it's not
doing what I would expect. My expectation is that the reverteffect
would only be triggered if the object I'm dragging is dropped back
where it started. What I'm seeing is that the reverteffect is
triggered regardless of where I drop the object. I'm including a
simple example below.

The question is, am I doing it wrong? Or am I not understanding what
it's supposed to do? Either way, how can I trigger a function ONLY IF
the object is dropped off where it started?

Thanks! Here's my code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Sortable ghosting functional test file</
title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /
>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">

var moveStartEffect = function(element) {
element._opacity = Element.getOpacity(element);
Draggable._dragging[element] = true;
new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:
0.7});
element.setStyle({backgroundColor:'#bfb'});
}

var moveRevertEffect = function(element, top_offset, left_offset) {
var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))
*0.02;
new Effect.Move(element, { x: -left_offset, y: -top_offset, duration:
dur,
queue: {scope:'_draggable', position:'end'}
});
element.setStyle({backgroundColor:'#fbf'});
}

</script>
<style>
div#testlist {
list-style-type:none;
margin:0;
padding:0;
}
div#testlist div.thingie {
width:200px;
font:12px Verdana;
padding:4px;
}
div#testlist div.thingie .over {
background-color:#fcb;
}
div#testlist div.thingie img {
float:left;
margin-right:8px;
cursor:move;
}
</style>
</head>
<body>
<h2>Drag and Drop Test</h2>
http://zenofshen.com/posts/ajax-sortable-lists-tutorial
<br /><br />
http://www.kavoir.com/2009/05/mysql-update-multiple-rows-with-one-single-query.html
<br /><br />
http://www.sitepoint.com/forums/showthread.php?t=426070
<br /><br />
http://www.phpfreaks.com/forums/index.php?topic=236338.0
<div id="testlist">
<div class="thingie" id="item_7"><img src="down.gif" class="down"
alt=""/> This is item No. 1</div>
<div class="thingie" id="item_8"><img src="down.gif" class="down"
alt=""/> This is item No. 2</div>
<div class="thingie" id="item_9"><img src="down.gif" class="down"
alt=""/> This is item No. 3</div>
<div class="thingie" id="item_14"><img src="down.gif" class="down"
alt=""/> This is item No. 4</div>
<div class="thingie" id="item_15"><img src="down.gif" class="down"
alt=""/> This is item No. 5</div>
<div class="thingie" id="item_16"><img src="down.gif" class="down"
alt=""/> This is item No. 6</div>
</div>

<p id="testlist_serialize">(waiting for onChange)</p>

<script type="text/javascript" language="javascript" charset="utf-8">
Sortable.create('testlist',
{ghosting:false,constraint:false,tag:'div',hoverclass:'over',
handle:'down',
starteffect:moveStartEffect, reverteffect:moveRevertEffect,
onUpdate:function(sortable){alert(Sortable.sequence(sortable))},
onChange:function(element){$('testlist_serialize').innerHTML =
Sortable.serialize(element.parentNode)}
});
</script>

</body>
</html>

ColinFine

unread,

Sep 14, 2009, 11:51:10 AM9/14/09

to Prototype & script.aculo.us

On Sep 11, 2:19 am, "Jon B." <jbernha...@gmail.com> wrote:
> I'm trying to use the reverteffect option on a sortable and it's not
> doing what I would expect. My expectation is that the reverteffect
> would only be triggered if the object I'm dragging is dropped back
> where it started. What I'm seeing is that the reverteffect is
> triggered regardless of where I drop the object. I'm including a
> simple example below.
>

I havent' used reverteffect or sortable, but I've used revert on
draggable, with a similar result.

It appears that it reverts irrespective of whether the drop succeeded
or not.

What I have done is to hide the dragged element when the drag
succeeds, so that the revert is not visible. In my case, the dropsite
is then regenerated in Ajax, so there is a brief moment when the
element has disappeared, and then it appears again in its new home. I
don't know if your instance could work that way.

DJ Mangus

unread,

Sep 14, 2009, 9:24:27 PM9/14/09

to prototype-s...@googlegroups.com

Rather than hide it you could remove it completely from the DOM. If your element isn't recreated via ajax after a drop, move it yourself after a successful drop by removing it from the DOM and reinserting it where it was dropped (or wherever makes sense for that matter if the target is sorted somehow.).

Jon B.

unread,

Oct 3, 2009, 12:47:08 PM10/3/09

to Prototype & script.aculo.us

I've got an update to the post I sent last month. Although my original
question was rather specific, I soon realized that I needed to solve a
broader problem and I'm happy to report that I've figured out a simple
solution!

Here's the (broader) problem: I drag an element within a sortable.
Sometimes I drag it to a different position and sometimes I don't. I
want to run different functions on the dragged element depending on
whether it has moved.

The callback OnUpdate is triggered when an element is moved, but it
doesn't know which element. The entire list is its parameter.
Conversely, reverteffect knows which element is being dragged, but it
doesn't know whether it's gone to a different position or not.

Conveniently, OnUpdate is called before reverteffect. My solution
involves using OnUpdate to add a temporary class to the list
enclosure. Then, reverteffect is used to test whether that class
exists. If it does, the class is removed and a function is called on
the moved element. If it doesn't, a different function can be called
on the dragged-but-not-moved element. Here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>script.aculo.us Sortable Test</title>

if (element.up().hasClassName('sortUpdate')) {
element.up().removeClassName('sortUpdate');
alert(element.id + ' has been moved');
} else {
alert(element.id + ' has not moved');
}
element.setStyle({backgroundColor:'#fff'});

}

</script>
<style>
div#testlist {
list-style-type:none;
margin:0;
padding:0;
}
div#testlist div.thingie {

background-color:#FFF;

width:200px;
font:12px Verdana;
padding:4px;
}
div#testlist div.thingie .over {
background-color:#fcb;
}
div#testlist div.thingie img {
float:left;
margin-right:8px;
cursor:move;
}
</style>
</head>
<body>
<h2>Drag and Drop Test</h2>

handle:'moveme',
starteffect:moveStartEffect, reverteffect:moveRevertEffect,
onUpdate: function(element) {
element.addClassName('sortUpdate');
}
});
</script>

</body>
</html>

On Sep 10, 9:19 pm, "Jon B." <jbernha...@gmail.com> wrote:
> I'm trying to use thereverteffectoption on a sortable and it's not

Reply all

Reply to author

Forward