Witam
Potrzebuje wcielić technologię drag and drop do zarządzania inventory postaci w grze przez www.
Nie jest to proste.
Macie może jakies sugestie jakiej biblioteki użyć?
Pełna wersja: Jaka biblioteka do drag&Drop dla karty postaci
Poszukaj czegoś pod coś, co masz już załadowane w swoim systemie (np. jQuery, MooTools). Jeśli nie korzystasz z żadnej z tych bibliotek to albo rozważ mintAjax albo jQuery. Pierwszy jest mniejszy ale ma wdbudowane d&d, drugi to kombajn z masą dodatków ale d&d nie ma od razu w jądrze. Wybór należy do Ciebie.
OT:
Raczej nie nazwałbym jQuery kombajnem: kilka "podstawowych" modułów do manipulacji DOMem, zdarzeniami, AJAX, kilka prostych efektów animacji + "Utilities" - chyba nic mi nie umknęło. To jest biblioteka o potężnych możliwościach, ale sama w sobie jest dosyć prosta.
Raczej nie nazwałbym jQuery kombajnem: kilka "podstawowych" modułów do manipulacji DOMem, zdarzeniami, AJAX, kilka prostych efektów animacji + "Utilities" - chyba nic mi nie umknęło. To jest biblioteka o potężnych możliwościach, ale sama w sobie jest dosyć prosta.
@Crozin:
Masz rację, nieco się zagalopowałem. Kombajn miałem tu na myśli w porównaniu do mintAjax. Faktem jest, że prawdziwym kombajnem JS jest np. ExtJS. Tak czy siak finalnie jQuery daje większe pole do popisu niż mintAjax.
Masz rację, nieco się zagalopowałem. Kombajn miałem tu na myśli w porównaniu do mintAjax. Faktem jest, że prawdziwym kombajnem JS jest np. ExtJS. Tak czy siak finalnie jQuery daje większe pole do popisu niż mintAjax.
akurat oba z nich testuje, tylko jest oby czegoś brakuje.
Mint ma fajną opcje limitowania wkładania do kontenera, jquery tego natywnie nie ma.
mint ma też od razu wyrównanie w kontenerze.
jednak poczytałem że mint nie jest już aktualizowany i że są problemy z d&d w niektórych przeglądarkach.
Mint ma fajną opcje limitowania wkładania do kontenera, jquery tego natywnie nie ma.
mint ma też od razu wyrównanie w kontenerze.
jednak poczytałem że mint nie jest już aktualizowany i że są problemy z d&d w niektórych przeglądarkach.
jQuery UI - świetna nakładka (?) na jQuery. Jak już Crozin wspomniał samo jQuery jest proste (hehe, jak na ~50kB kodu), ale jego siła tkwi we wtyczkach. A tych jest mnóstwo i w miarę łatwo (no w zasadzie) się je łączy.
no jasne, używam jqury UI do d&d, tzn staram się użyć 
Tylko nie jest to takie proste jak mi się wydawało.
no dobra coś już mam , teraz potrzebuje 1 rzeczy.
Połączenia tego z php.
Tak żeby po przerzuceniu przedmiotu mógłbyś wykonany skrypt php który będzie aktualizować statystyki, informacje o zalożonych itemamch w bazie i co najważniejsze pozwoli odrzucić przedmiot którego nie da sie założyć.
Druga sprawa to wyrównanie przerzuconego obiektu w kontenerze.
skrypt wygląda tak:
Tylko nie jest to takie proste jak mi się wydawało.
no dobra coś już mam , teraz potrzebuje 1 rzeczy.
Połączenia tego z php.
Tak żeby po przerzuceniu przedmiotu mógłbyś wykonany skrypt php który będzie aktualizować statystyki, informacje o zalożonych itemamch w bazie i co najważniejsze pozwoli odrzucić przedmiot którego nie da sie założyć.
Druga sprawa to wyrównanie przerzuconego obiektu w kontenerze.
skrypt wygląda tak:
Kod
<style type="text/css">
#ja {border: 1px solid black; width:246px; height: 82px;}
#on {border: 1px solid black; width:246px; height: 82px;}
.item {float: left; border: 1px solid black; width: 80px; height: 80px;}
</style>
<script type="text/javascript">
$(function() {
$("#item1").draggable({ revert: 'invalid' });
$("#item2").draggable({ revert: 'invalid' });
$("#item3").draggable({ revert: 'invalid' });
$("#item4").draggable({ revert: 'invalid' });
$("#item5").draggable({ revert: 'invalid' });
$("#item6").draggable({ revert: 'invalid' });
$("#ja").droppable({
});
$("#on").droppable({
});
});
</script>
</head>
<body>
Plecak bohatera
<div id="ja">
<div id="slot_ja_1" class="ui-widget-header"><div id="item1" class="item ui-widget-content"><img src="obrazki/przedmioty/testowe/helm.png" alt="" /></div></div>
<div id="slot_ja_2" class="ui-widget-header"><div id="item2" class="item ui-widget-content"><img src="obrazki/przedmioty/testowe/tarcza.png" alt="" /></div></div>
<div id="slot_ja_3" class="ui-widget-header"><div id="item3" class="item ui-widget-content"></div></div>
</div><br /><br /><br />
Plecak handlarza
<div id="on">
<div id="slot_on_1" class="ui-widget-header"><div id="item4" class="item ui-widget-content"><img src="obrazki/przedmioty/testowe/helm.png" alt="" /></div></div>
<div id="slot_on_2" class="ui-widget-header"><div id="item5" class="item ui-widget-content"></div></div>
<div id="slot_on_3" class="ui-widget-header"><div id="item6" class="item ui-widget-content"><img src="obrazki/przedmioty/testowe/legs1.png" alt="" /></div></div>
</div>
#ja {border: 1px solid black; width:246px; height: 82px;}
#on {border: 1px solid black; width:246px; height: 82px;}
.item {float: left; border: 1px solid black; width: 80px; height: 80px;}
</style>
<script type="text/javascript">
$(function() {
$("#item1").draggable({ revert: 'invalid' });
$("#item2").draggable({ revert: 'invalid' });
$("#item3").draggable({ revert: 'invalid' });
$("#item4").draggable({ revert: 'invalid' });
$("#item5").draggable({ revert: 'invalid' });
$("#item6").draggable({ revert: 'invalid' });
$("#ja").droppable({
});
$("#on").droppable({
});
});
</script>
</head>
<body>
Plecak bohatera
<div id="ja">
<div id="slot_ja_1" class="ui-widget-header"><div id="item1" class="item ui-widget-content"><img src="obrazki/przedmioty/testowe/helm.png" alt="" /></div></div>
<div id="slot_ja_2" class="ui-widget-header"><div id="item2" class="item ui-widget-content"><img src="obrazki/przedmioty/testowe/tarcza.png" alt="" /></div></div>
<div id="slot_ja_3" class="ui-widget-header"><div id="item3" class="item ui-widget-content"></div></div>
</div><br /><br /><br />
Plecak handlarza
<div id="on">
<div id="slot_on_1" class="ui-widget-header"><div id="item4" class="item ui-widget-content"><img src="obrazki/przedmioty/testowe/helm.png" alt="" /></div></div>
<div id="slot_on_2" class="ui-widget-header"><div id="item5" class="item ui-widget-content"></div></div>
<div id="slot_on_3" class="ui-widget-header"><div id="item6" class="item ui-widget-content"><img src="obrazki/przedmioty/testowe/legs1.png" alt="" /></div></div>
</div>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.