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";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
<head>
<title>script.aculo.us Sortable Test</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'}
});
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>
<div id="testlist">
<div class="thingie" id="item_1"><img src="img_UpDown.gif"
class="moveme" alt=""/> This is item No. 1</div>
<div class="thingie" id="item_2"><img src="img_UpDown.gif"
class="moveme" alt=""/> This is item No. 2</div>
<div class="thingie" id="item_3"><img src="img_UpDown.gif"
class="moveme" alt=""/> This is item No. 3</div>
<div class="thingie" id="item_4"><img src="img_UpDown.gif"
class="moveme" alt=""/> This is item No. 4</div>
<div class="thingie" id="item_5"><img src="img_UpDown.gif"
class="moveme" alt=""/> This is item No. 5</div>
<div class="thingie" id="item_6"><img src="img_UpDown.gif"
class="moveme" alt=""/> This is item No. 6</div>
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
Sortable.create('testlist',
{ghosting:false,constraint:false,tag:'div',hoverclass:'over',
handle:'moveme',
starteffect:moveStartEffect, reverteffect:moveRevertEffect,
onUpdate: function(element) {
element.addClassName('sortUpdate');
}
});
</script>
</body>
</html>
On Sep 10, 9:19 pm, "Jon B." <[email protected]> wrote:
> I'm trying to use thereverteffectoption on a sortable and it's not
> doing what I would expect. My expectation is that thereverteffect
> would only be triggered if the object I'm dragging is dropped back
> where it started. What I'm seeing is that thereverteffectis
> 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?
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
