Hi all, I''m having trouble using Insertion.After with a sortable list. The new item is inserted properly but is not sortable because it''s not in the document flow (at least I assume that''s the trouble). Any ideas on getting around this? Thanks. _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Tristan Kelley wrote:> I''m having trouble using Insertion.After with a sortable list. The new > item is inserted properly but is not sortable because it''s not in the > document flow (at least I assume that''s the trouble). Any ideas on > getting around this? Thanks.The new items is probably not sortable because when the sortable list is created all elements get setup as a draggable element. Your new element does not get that draggable initialization. I would guess that you could just re-run the same code you used to make it a sortable in the first place although maybe that would cause problems since two sets of event handlers will be attached. The less brute force approach is to just initialize your new element as a draggable just like the Sortables does. You''ll probably just have to play with it a bit. Would be nice if the Sortables had a "reinit" method that would reinitialize a list while at the same time cleaning up the event handlers from the old initialization. Eric
Any ideas on making this insert into a draggable?
<p>
<a href="#" onclick="new
Insertion.After(''left_column'', ''<div
class=\"section\" id=\"left_column\">Insertion
Test</div>''); return false;">
Click here to insert a new line.
</a>
</p>
Here''s some of my sortable code:
// <![CDATA[
sections =
[''left_column'',''right_column''];
Sortable.create(''left_column'',{tag:''div'',dropOnEmpty:
true, containment:
sections,constraint:false,only:''blurb'',onUpdate:updateRanking});
Sortable.create(''right_column'',{tag:''div'',dropOnEmpty:
true,
containment:
sections,constraint:false,only:''blurb'',onUpdate:updateRanking});
// ]]>
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Per Eric''s suggestion, the simple thing to do is to make the insertion,
destroy the sortable, then create the sortable again. The method to destroy
is Sortable.destroy().
Sortable.destroy(''left_column'');
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of Tristan
Kelley
Sent: Friday, June 09, 2006 1:44 PM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: [Rails-spinoffs] Re: Making an Insertion.After element a Sortable
Any ideas on making this insert into a draggable?
<p>
<a href="#" onclick="new
Insertion.After(''left_column'', ''<div
class=\"section\" id=\"left_column\">Insertion
Test</div>''); return false;">
Click here to insert a new line.
</a>
</p>
Here''s some of my sortable code:
// <![CDATA[
sections =
[''left_column'',''right_column''];
Sortable.create(''left_column'',{tag:''div'',dropOnEmpty:
true, containment:
sections,constraint:false,only:''blurb'',onUpdate:updateRanking});
Sortable.create(''right_column'',{tag:''div'',dropOnEmpty:
true,
containment:
sections,constraint:false,only:''blurb'',onUpdate:updateRanking});
// ]]>
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Thanks Ken
I can get this to when using Builder.node(''div''.... to place
the div but not
Insertion.After - is there a fundamental difference between the two? The
Insertion.After div will drag but will not be recognized as a sortable.
On 6/9/06, Ken Snyder <ksnyder-evSXmdsRj0TQT0dZR+AlfA@public.gmane.org>
wrote:>
> Per Eric''s suggestion, the simple thing to do is to make the
insertion,
> destroy the sortable, then create the sortable again. The method to
destroy
> is Sortable.destroy().
>
>
>
> Sortable.destroy(''left_column'');
>
>
>
> *From:*
rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:
> rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
*On Behalf Of *Tristan
> Kelley
> *Sent:* Friday, June 09, 2006 1:44 PM
> *To:* rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> *Subject:* [Rails-spinoffs] Re: Making an Insertion.After element a
> Sortable
>
>
>
> Any ideas on making this insert into a draggable?
>
> <p>
> <a href="#" onclick="new
Insertion.After(''left_column'', ''<div
> class=\"section\" id=\"left_column\">Insertion
Test</div>''); return false;">
>
> Click here to insert a new line.
> </a>
> </p>
>
> Here''s some of my sortable code:
>
> // <![CDATA[
> sections =
[''left_column'',''right_column''];
>
Sortable.create(''left_column'',{tag:''div'',dropOnEmpty:
true,
> containment:
>
sections,constraint:false,only:''blurb'',onUpdate:updateRanking});
>
Sortable.create(''right_column'',{tag:''div'',dropOnEmpty:
true,
> containment:
>
sections,constraint:false,only:''blurb'',onUpdate:updateRanking});
> // ]]>
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>
>
>
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Hmm, you may need Insertion.Bottom() instead of After. The after will be
out of the ''left_column'' container.
The code below may also be problematic because the newly inserted node has
the same id as the one after which you inserted.
<a href="#" onclick="new
Insertion.After(''left_column'', ''<div
class=\"section\" id=\"left_column\">Insertion
Test</div>''); return false;">
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of Tristan
Kelley
Sent: Friday, June 09, 2006 3:56 PM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: Re: [Rails-spinoffs] Re: Making an Insertion.After element a
Sortable
Thanks Ken
I can get this to when using Builder.node(''div''.... to place
the div but not
Insertion.After - is there a fundamental difference between the two? The
Insertion.After div will drag but will not be recognized
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Here the basic layout/function of my page. The Insertion is still not
draggable but if I use Builder.node it is. Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">
<head>
<style type="text/css" media="screen">
@import url(css/style.css);
</style>
<script src="scriptaculous-js-1.6.1/lib/prototype.js"
type="text/javascript"></script>
<script src="scriptaculous-js-1.6.1/src/scriptaculous.js"
type="text/javascript"></script>
</head>
<body onload="startDragging();">
<script type="text/javascript">
function newtest() {
Sortable.destroy(''left_column'');
element = new Insertion.Top(''left_column'',
''<div id="drag_5"
class="blurb">Inserted test drag</div>'');
new Draggable(element);
startDragging();
}
</script>
<a onclick="newtest()" style="cursor:pointer ">
Add a new paragraph
</a>
<div id="left_column" class="section">
<div id="drag_1" class="blurb">Drag test
1</div>
<div id="drag_2" class="blurb">Drag test
2</div>
</div><!-- end left column -->
<div id="right_column" class="section1">
<div id="drag_3" class="blurb">Drag test
3</div>
<div id="drag_4" class="blurb">Drag test
4</div>
</div><!-- end right column -->
<script type="text/javascript">
function startDragging() {
// <![CDATA[
sections =
[''left_column'',''right_column''];
Sortable.create(''left_column'',{tag:''div'',dropOnEmpty:
true, containment:
sections,constraint:false,only:''blurb''});
Sortable.create(''right_column'',{tag:''div'',dropOnEmpty:
true,
containment: sections,constraint:false,only:''blurb''});
// ]]>
}
</script>
</body>
</html>
From: *Ken Snyder
<ksnyder-evSXmdsRj0TQT0dZR+AlfA@public.gmane.org>*Mailed-By:
*lists.rubyonrails.org*Reply-To:
*rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org*
To: *rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org*
Date: *Jun 9, 2006 4:30 PM*
Subject: *RE: [Rails-spinoffs] Re: Making an Insertion.After element a
Sortable*
Hmm, you may need Insertion.Bottom() instead of After. The after will be
out of the ''left_column'' container.
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Tristan,
If I change
new Draggable(element);
to
new Draggable(''drag_5'');
it works for me.
When doing an alert(element.toSource()) I get
({element:{}, content:"<div id="drag_5"
class="blurb">Inserted test
drag</div>", range:{}})
So it looks like this use of Inserstion.Top() returns a text node or a hash.
Ken
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of Tristan
Kelley
Sent: Monday, June 12, 2006 8:55 AM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: Re: [Rails-spinoffs] Re: Making an Insertion.After element a
Sortable
Here the basic layout/function of my page. The Insertion is still not
draggable but if I use Builder.node it is. Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
<http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">
<head>
<style type="text/css" media="screen">
@import url(css/style.css);
</style>
<script src="scriptaculous-js-1.6.1/lib/prototype.js"
type="text/javascript"></script>
<script src="scriptaculous-js-1.6.1/src/scriptaculous.js"
type="text/javascript"></script>
</head>
<body onload="startDragging();">
<script type="text/javascript">
function newtest() {
Sortable.destroy(''left_column'');
element = new Insertion.Top(''left_column'',
''<div id="drag_5"
class="blurb">Inserted test drag</div>'');
new Draggable(element);
startDragging();
}
</script>
<a onclick="newtest()" style="cursor:pointer ">
Add a new paragraph
</a>
<div id="left_column" class="section">
<div id="drag_1" class="blurb">Drag test
1</div>
<div id="drag_2" class="blurb">Drag test
2</div>
</div><!-- end left column -->
<div id="right_column" class="section1">
<div id="drag_3" class="blurb">Drag test
3</div>
<div id="drag_4" class="blurb">Drag test
4</div>
</div><!-- end right column -->
<script type="text/javascript">
function startDragging() {
// <![CDATA[
sections =
[''left_column'',''right_column''];
Sortable.create
(''left_column'',{tag:''div'',dropOnEmpty: true,
containment: sections,constraint:false,only:''blurb''});
Sortable.create(''right_column'',{tag:''div'',dropOnEmpty:
true,
containment: sections,constraint:false,only:''blurb''});
// ]]>
}
</script>
</body>
</html>
From: Ken Snyder <ksnyder-evSXmdsRj0TQT0dZR+AlfA@public.gmane.org
<mailto:ksnyder-evSXmdsRj0TQT0dZR+AlfA@public.gmane.org> >
Mailed-By: lists.rubyonrails.org
Reply-To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Date: Jun 9, 2006 4:30 PM
Subject: RE: [Rails-spinoffs] Re: Making an Insertion.After element a
Sortable
Hmm, you may need Insertion.Bottom() instead of After. The after will be
out of the ''left_column'' container.
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs