JavaScript, scriptaculous oraz dziwaczny blad

Jest sobie strona: http://boduch.net/coyote/Foo
Po kliknieciu w male logo po prawej stronie, rozwija sie formularz umozliwiajacy maniupolowaniem menu (drag'n'drop). Kasowanie po przeciagnieciu pozycji na kosz dziala. OK. Po wpisaniu tytulu tekstu w input, wyswietli sie lista tekstow zwiazanych z wpisanym haslem. Z wyswietlonej listy mozna przeciagnac tylko OSTATNI element na zielony pasek. Cholera, czemu :( Teoretycznie, to powinno dzialac:

new Ajax.Request('http://boduch.net/coyote/Personalize/Search',
{
	method: 'get',
	parameters: {path: $('path').value},
	onLoading : function()
	{
		$('searchResult').innerHTML = '';
	},
	onSuccess : function(transport)
	{  
		var json = transport.responseText.evalJSON();
		for (var i = 0; i < json.results.length; i++)
		{ 
			$('searchResult').innerHTML = $('searchResult').innerHTML +
				'<li class="draggable" id="' + json.results[i].result.id + '"><a onclick="return false" href="' + json.results[i].result.url + '">' + json.results[i].result.caption + 
					(json.results[i].result.is_cat == 1 ? ('<em id="em' + json.results[i].result.id + '" onclick="return DropMenu(this, event, ' + json.results[i].result.id + ', \'' + json.results[i].result.caption + '\')"></em></a></li>') : '</a></li>');

			new Draggable(json.results[i].result.id, {revert:true});
		}
}         }

Konkretnie chodzi o linie:

new Draggable(json.results[i].result.id, {revert:true});

WTF?? Czemu w petli, tylko ostatnia pozycja jest 'draggable'? :/

Chyba ta biblioteka ma z tym jakieś problemy - przejrzałem krok po kroku i "przeciągalność" jest nadpisywana przy każdym przejściu przez pętlę :| Trzeba poszukac w dokumentacji czemu tak to zrobili.

@nav: tez tak myslalem, ale zobacz zrodlo tej samej strony, linia 161:

li = $('m_1').select('ul')[0].select('li');
for (var i = 0; i < li.length -1; i++)
{	
	new Draggable(li[i].id, {
		revert:true,
		onStart : function()
		{
			
		},
		onEnd : function()
		{
			
		}
	});			
}

Idea ta sama, w petli. A dziala :/ Damn it.

Ja bym zamienił new Draggable (...) miejscami z $("searchResults") ...
Nie wiem czy to pomoże, ale spróbować warto ;-)
Inna propozycja - porzucić innerHTML i operować na obiektach DOM.
W ostateczności - jQuery / Mootools, w tych bibliotekach d&d elementów działa bez problemów.

Po zamianie w ogole nie dziala :D Nic sie nie pokazuje, zadnej reakcji. Dlatego, ze nie istnieje w tym momencie element o tym ID, ktory ma byc 'draggable' (dodajemy go dopiero w kolejnej instrukcji w petli). Tak wiec kolejnosc jest dobra, a ta biblioteka przetracona ;)

Dobra, zmienilem na jQuery i mam kolejny problem :/ Ustawiam elementy jako draggable i kosz jako droppable. Wszystko jest ok, ale jak pobrac ID elementu, ktory wlasnie zostal upuszczony? W dokumentacji pisza od zdarzeniu drop : function(el, ul). Fajnie, ale brak wyjasnienia co oznaczaja te parametry ;/

Ok, domyslilem sie ze przynajmniej pierwszy to element. Ale nie moge odczytac zadnej wartosci tego obiektu - zwraca 'undefined' za kazdym razem ;/

$('#dropzone1').Droppable(
	{
		accept : 'dropaccept', 
		activeclass: 'dropzoneactive', 
		hoverclass:	'dropzonehover',
		ondrop:	function (drag) 
				{
					alert(this); //the droppable
					alert(drag); //the draggable
				},
		fit: true
	}
);

Sprawdź coś takiego ;-)

Hmmm skad to wzieles ? ;)
W jQuery nie ma zdarzenia ondrop - jest za to drop. Ale ok, takie cos juz probowalem wczesniej. Niby ok, wyswietla [object Object] ale proba odwolania sie do jakiegos pola tego obiektu, zwraca zawsze 'undefinied' ;/

Jest w JS cos takiego jak print_r() w PHP? Zeby mi wyswietlilo przyjaznie jakie elementy ma ten obiekt?

DOPISANE:
ok, wiem, ze nie ma, sciagnelem jakas gotowa, ale w ogole nic nie chce wyswietlic, nie dziala drop. Eh, Panowie powiem Wam jedno - JS suxx :D :P Mam go juz dosyc, ide se ...

http://interface.eyecon.ro/ Oryginalne z jQuery się jakoś dziwnie zachowuje :|

Jest w JS cos takiego jak print_r() w PHP? Zeby mi wyswietlilo przyjaznie jakie elementy ma ten obiekt?
Defaultowo to nie ma, ale jest za to Firebug, bardzo zaawansowana wtyczka dla Firefoksa. Zainstalujesz i wtedy wystarczy użyć console.log(obiekt);, żeby poznać cały obiekt "od środka".
Spróbuj, wtedy pisanie w JS jest o niebo łatwiejsze i przyjemniejsze :-)

A mamusiu :D Czemu nie widzialem tego wczesniej? :D Jestem w domu ;p
[browar]

DOPISANE:

Wedlug tego co Firebug mi pokazuje to moj ID element powinien byc pod:

drop: function(drag)
{
	elementId = drag.rangeParent.parentNode.parentNode.id;
}

[rotfl]
Element 'droppable' to:

Delphi</li>

Czyli TEORETYCZNIE drag.innerHTML powinien mi zwrocic znacznik <a> ??
Co najlepsze drag.rangeParent.parentNode.parentNode.id; rzeczywiscie pod FF zwraca ID elementu. Czyli cacy! Tak powinno byc ;)) Niestety w Operze takie cos nie ma prawa dzialac :P

Event thread: mouseup
Error:
name: TypeError
message: Statement on line 111: Could not convert undefined or null to object
Backtrace:
Line 111 of inline#3 script in
elementId = drag.rangeParent.parentNode.parentNode.id;
Line 26 of linked script
data = jQuery.makeArray(data || []);
if (! element)
else
return val;
Line 26 of linked script
if (this[0])
Line 149 of linked script
$(this.element).triggerHandler("drop", [e, this.prepareCallbackObj(c)], o.drop);
Line 47 of linked script
oDrop.item.drop.call(oDrop.item, e);
Line 23 of linked script
if (typeof fn == "string")
var result = [];
for (var i = 0, el = elems.length;i < el;i++)
return result;
Line 44 of linked script
var oOvers = $.grep(oDrops, (function (oDrop)
{
if (! oDrop.item.disabled && $.ui.intersect(oDrag, oDrop, oDrop.item.options.tolerance))
oDrop.item.drop.call(oDrop.item, e);
}
));
Line 154 of linked script
$.ui.ddmanager.fire(this, e);
Line 89 of linked script
self.stop.apply(t, [self, e]);
Line 195 of linked script
if (o._beforeStop)
Line 115 of linked script
return self.stop.apply(self, [e]);
Line 26 of linked script
var val;
event = jQuery.event.fix(event || window.event || {});
var parts = event.type.split(".");
event.type = parts[0];
var c = jQuery.data(this, "events") && (jQuery.data(this, "events"))[event.type], args = Array.prototype.slice.call(arguments, 1);
args.unshift(event);
for (j in c)
if (jQuery.browser.msie)
return val;
Line 23 of linked script
var val;
if (typeof jQuery == "undefined" || jQuery.event.triggered)
val = jQuery.event.handle.apply(element, arguments);
return val;
At unknown location
[statement source code not available]

Poawie sie jeszcze, moze to wina tego ze uzywam jQuery i prototype jednoczesnie? :/

Zapewne drag to element klikany, więc skoro przeciągasz łapiąc za "Delphi" to li dostajesz przez parentNode.parentNode. Można się ratować prostą pętelką:

while (drag.nodeName != 'LI') drag=drag.parentNode;

I masz pewność że drag to LI :-)

Ta biblioteka którą podałem (interface) jakoś ładniej jest zrobiona - dostaje zawsze element ustawiony jako draggable, nie element kliknięty.

A co do używania prototype i jQuery - chyba warto się zdecydować na jedną, obie powinny oferować podobną funkcjonalność :-) No i zawsze można coś dopisać :P

Ok, ale ta biblioteka chyba jest rabnieta. Sorry, nie testowalem tego co napisales, bo juz calkowicie kod rozgrzebalem. Zobacz kod prostej stronki:

http://boduch.net/coyote-f/jQuery1.htm

Banal kod, z tego co napisali w manualu powinien dzialac. Korzysta z najnowszej (pelnej) biblioteki interface oraz najnowszego jQuery (dopiero co sciagnelem). Sprobuj przeciagnac czerwony kwadracik nad zielony. W FF wywala blad:

jQuery.expr[m[1]] has no properties

OK! Jak bardzo zmeczony jestem, bo nie wiem gdzie popelniam blad :(

Natomiast jak zauwazylem w demo (np. http://docs.jquery.com/UI/Droppables) pluginu UI. linkuja do innych plikow, np.:

ui.mouse.js, ui.draggable.js...

Pobralem je i dziala! eh...

DOPISANE:

kropka ;] pieprzona kropa wywalala ten blad.
Sorry za zamieszanie. W tym pluginie UI trzeba pisac:

accept: '.block',

W interface, najwyrazniej:

accept: 'block',

Och...