Autor Zpráva
pl
Profil *
ahoj
mam mensi problem a nejak nemuzu prijit na reseni.
tady je ukazkovy script: http://jqueryui.com/demos/droppable/#accepted-elements
jak vidite pokud vlozite box do kontejneru tak kontejner zmeni barvu. a ja bych potreboval dosahnout toho aby kdyz naopak box z kontejneru odstranim tak kontejner opet zmenil barvu.
poradil by mi prosim nekdo jak na to?
Radim24
Profil
Ahoj
Ještě jsem to neřešil, ale mělo by to jít vyřešít tímto:

http://jqueryui.com/demos/droppable/#event-out
pl
Profil *
to je jen jiny priklad toho co jsem ukazal nahore.
po pretahnuti boxu container zmeni barvu ale kdyz box pretahnu mimo nej tak containeru barva zustane a prave netusim jak mu ji pri oddelani boxu zmenit zase na jinou
Radim24
Profil
Jestli nepomůže tohle tak nevím.
jso
Profil *
pl
no, tak jak je to udělané na příkladu, kdy se přiřazuje při akci drop cíli třída, tak při drag ji zase odebrat, ne?
jso
Profil *
pl
konkrétně se toho dá docílit:
#This event is triggered when an accepted draggable is dragged out (within the tolerance of) this #droppable.
#Code examples

#Supply a callback function to handle the out event as an init option.

    $('.selector').droppable({
       out: function(event, ui) { ... }
    });

#Bind to the out event by type: dropout.

    $('.selector').bind('dropout', function(event, ui) {

    });


jak zmiňoval Radim24
pl
Profil *
jso
problem je ze container zadny event drag nema. ten ma jen samotny box. a ted je problem vtom ze pokud mam vice containeru tak jak urcit ten ve kterem se dany box prave nachazi?
jso
Profil *
pl
ale mám out
out: function(event, ui) { ... }
pl
Profil *
jso
takze uz chapu proc mi to neslo - when an accepted draggable is dragged out a ja container po pridani boxu zamykal

takze takhle to funguje

$(function() {

		$(".draggable").draggable({ revert: 'invalid' });

		$(".droppable").droppable({
			accept: '.draggable',
			drop: function(event, ui) {
				/*$(this).droppable('disable');*/
				$(this).addClass('red');
			},
			out: function(event, ui) {
				$(this).removeClass('red')
			}
		});

	});


ale ted mam prozmenu problem vtim ze do containeru jde dat vic prvku a ja potreboval prave jen jeden. jak ted ted mohu omezit pocet prvku? resp zamknout container a pri oddelani boxu opet odemknout?
Radim24
Profil
pl
"ja container po pridani boxu zamykal" ...
accept: '.draggable'

A co jsi tam měl před tím?
jso
Profil *
pl
po drop jej zamknout, při out jej odemknout
pl
Profil *
jso
po drop jej zamknout, při out jej odemknout

no ale jak. chtel jsem takhle ale protoze u out to neodemkne asi protoze "when an accepted draggable is dragged out"

drop: function(event, ui) {
$(this).droppable('disable');
$(this).addClass('red');
},
out: function(event, ui) {
$(this).droppable('enable');
$(this).removeClass('red')
}
jso
Profil *
pl
no, lze to zajistit pomocí nastavení cancel
$('.selector').draggable('option', 'cancel', 'button');


pro re-use by se možná hodilo něco jako:
$(".droppable").length
.
Radim24
Profil
Můžete mi vysvětlit proč to zamykáte? Rád bych tomu rozuměl. Dík
jso
Profil *
Radim24
no, když se to zamkne (deaktivuje), nefunguje pak drop či drag. Nelze tedy prvky chytnou, tahat je či je někam "umisťovat".
pl
Profil *
Radim24

jednoduse mam dva boxy a jeden container. oba boxy jdou pretahnout do containeru. proste vezmes prvni box pretahnes, pak vezmes druhy box a pretahnes a jsou v containeru oba.

a ted si predstav ze po umisteni prvniho boxu potrebuju dosahnout toho aby tam uz druhy vlozit nesel. a naopak aby sel prvni z boxu oddelat a potom treba vlozit druhy box (a kdyz tam bude druhy tak tam zase nepujde vlozit prvni)
proto jsem se snazil po vlozeni container nejak uzamknout a pri oddelani boxu jej odemknout

drop: function(event, ui) { 
$(this).droppable('disable'); 
$(this).addClass('red'); 
}, 
out: function(event, ui) { 
$(this).droppable('enable'); 
$(this).removeClass('red') 
}


jenze kdyz to zamknes $(this).droppable('disable'); tak pak uz out: function(event, ui) { nereaguje
jso
Profil *
jso
a zkoušel jsi to pomocí length? Tam by šlo zjistit, kolik prvků tam již je.
Radim24
Profil
Lidi, to se mi asi bude hodit! Já měl problém, že při změně velikosti prvku, který je .sortable() a zároveň .resizeable() to dělalo rotiku. Místo abych to vypnul, tak jsem aktivoval proměnnou dragged=false a resized=true a naopak. Před spuštěním těch fnc jsem pak dal if dragged nebo if resized. Zbytečně složité, že? Takže já bych to mohl vyřešit tak jak vy, ale má to jeden háček. Ta metoda sortable je už spuštěná, když provádím resize. Je možné ji vypnout voláním z
.resizeable(){
            resize: function(event, ui) {
            }
        });

?
pl
Profil *
jso
a zkoušel jsi to pomocí length? Tam by šlo zjistit, kolik prvků tam již je.

mohl bys prosim ukazat jak.
Radim24
Profil
pl
Teď nevím co řešíte, ale počet prvků dělám pomocí .children().length např. .children("li").length
pl
Profil *
Radim24
viz #16 proste porad mi to nejde zamknout a odemknout aby tam mohl byt prave jeden prvek
Radim24
Profil
pl
Tak do drop: přidej funkci, která změní třídu nebo identifikátor tomu druhému boxu. Tj. tu třídu, která z něj dělá dragable. Tak mu znemožníš, aby se dal přetáhnout, a zároveň ten první box bude stále dragable. Nebo dropable... vyber si :-)
pl
Profil *
Radim24
tak presne tohle jsem zkousel jeste pred tim zamykanim. rikam si ze jen oddelam .droppable a bude to. nevim jestli existuje nejaka cache ale proste oddelat tridy nestaci.

$(".droppable").droppable({
			accept: '.item',
			drop: function(event, ui) {
				$(this).removeClass('ui-droppable');
				$(this).removeClass('droppable');
				$(this).addClass('red');
			},
			out: function(event, ui) {
				$(this).removeClass('red')
			}


container uz pak nema zadnou tridu ale box do nej stejne pridat jde
pl
Profil *
no nasel jsem jinou knihovnu u ktere je ukazka velice velice podobna tomu co chci.

http://www.dhtmlgoodies.com/scripts/drag-drop-custom/demo-drag-drop-3.html

kdyby se tu ukazal nekdo zkusenejsi kdo by mi poradil jak tohle udelat v jquery byl bych vdecny
Radim24
Profil
pl
Je to zajímavé...

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: