jQuery drag & drop + clone
Olyan oldalt készítek, ahol különböző méretű DIV-eket lehet a képernyőn tologatni - egérrel húzogatni és variálni, cserélgetni az elhelyezkedésüket. Ez lenne a drag&drop + clone.
Amit eddig összehoztam működik és egész jó. Hozzáteszem, nem vagyok programozó, nem értem a javascript utasításokat, funkciókat, satöbbi - én csak a HTML-t és a CSS-t vágom. Úgy valósítottam meg az aktuális állapotot, hogy olvastam a jQuery specifikációt és tanulmányoztam a hivatalos demók forráskódját - ezekből kombináltam ki, hogy merre van az előre. De elakadtam, mert most már úgyhiszem, kombinálni kellene az utasításokat.
Amit nem sikerült magvalósítanom s amihez segítséget szeretnék kérni a következő:
- amikor egy dragged elemet újra mozgatni kezdünk, akkor is jelenjen meg a droppable container hover állapota
- kellene egy törlés gomb arra az esetre, hogy ha egy dragged elemet szeretnék eltávolítani
- amikor egy kiválasztott elemet drag&drop beejtünk, az 1px elmozdulással kerül a containerbe - ez nem kellene, zavaró, mert utána minden elemet egyesével a helyére kell igazgatni
- a beejtett elemek egymás alá kerülnek, akár a képernyőből is kifutva. Ehelyett jó lenne az, ha oda kerülnének, ahol elengedjük őket
- szeretném, ha a dragged elemek nem csak a container-hez tapadnának, hanem egymáshoz is
A doctype HTML5, forráskódja így néz ki:Eddig jutottam a jQuery-velÉs ez itt a CSSHa csak valamely részhez tudsz megoldást adni, azt is köszönöm.
■ Amit eddig összehoztam működik és egész jó. Hozzáteszem, nem vagyok programozó, nem értem a javascript utasításokat, funkciókat, satöbbi - én csak a HTML-t és a CSS-t vágom. Úgy valósítottam meg az aktuális állapotot, hogy olvastam a jQuery specifikációt és tanulmányoztam a hivatalos demók forráskódját - ezekből kombináltam ki, hogy merre van az előre. De elakadtam, mert most már úgyhiszem, kombinálni kellene az utasításokat.
Amit nem sikerült magvalósítanom s amihez segítséget szeretnék kérni a következő:
- amikor egy dragged elemet újra mozgatni kezdünk, akkor is jelenjen meg a droppable container hover állapota
- kellene egy törlés gomb arra az esetre, hogy ha egy dragged elemet szeretnék eltávolítani
- amikor egy kiválasztott elemet drag&drop beejtünk, az 1px elmozdulással kerül a containerbe - ez nem kellene, zavaró, mert utána minden elemet egyesével a helyére kell igazgatni
- a beejtett elemek egymás alá kerülnek, akár a képernyőből is kifutva. Ehelyett jó lenne az, ha oda kerülnének, ahol elengedjük őket
- szeretném, ha a dragged elemek nem csak a container-hez tapadnának, hanem egymáshoz is
A doctype HTML5, forráskódja így néz ki:
<div class="col-1"> <!-- ezek a draggable elemek -->
<div class="mozgat f-szurke f75x30"><p>F 75x30</p></div>
<div class="mozgat f-szurke f75x45"><p>F 75x45</p></div>
</div>
<p class="clr"> </p>
<div id="osszerakas"> <!-- ezek pedig a dropable -->
<div id="snaptarget1" class="bal-oszlop tapad bal"></div>
<div id="snaptarget2" class="kozepso-oszlop tapad bal"></div>
<div id="snaptarget3" class="jobb-oszlop tapad jobb"></div>
</div>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script>
$(function () {
$(".mozgat").draggable({
helper: "clone",
appendTo: "body",
revert: "invalid",
scroll: false
});
$("#snaptarget1,#snaptarget2,#snaptarget3").droppable({
accept: ".mozgat",
activeClass: "snaptarget-hover",
drop: function (event, ui) {
$(this).append($(ui.draggable).clone());
$("#snaptarget1 .mozgat,#snaptarget2 .mozgat,#snaptarget3 .mozgat").addClass("item");
$(".item").removeClass("ui-draggable mozgat");
$(".item").draggable({
containment: "#osszerakas",
grid: [1, 1],
snap: ".tapad",
snapMode: "inner",
stack: ".item"
});
}
});
});
</script>
* { padding: 0; margin: 0; }
.clr { clear: both; }
body { background-color: #4A5157; font-family: sans-serif; }
.col-1, .col-2, .col-3 {
position: relative;
float: left;
margin-right: 7px; }
.mozgat { cursor: move; margin-bottom: 7px; }
.f75x30 {
width: 150px; height: 60px;
line-height: 60px;
border-radius: 2px; }
.f75x45 {
width: 150px; height: 90px;
line-height: 90px;
border-radius: 2px; }
.f75x30 p, .f75x45 p {
font-family: sans-serif;
font-size: 18px;
color: Gainsboro;
text-align: center;
text-shadow: 0px 1px 1px rgba(0, 0, 0, .4); }
.jobb { float: right; }
.bal { float: left; }
.f-szurke { background-color: #999999; }
#osszerakas { margin: 0 auto; width: 788px; height: 500px; }
.item {
cursor: move;
border: 1px solid #333;
border-collapse: collapse; }
#snaptarget1, #snaptarget2, #snaptarget3 {
position: relative;
border: 1px solid #4A5157;
border-collapse: collapse; }
#snaptarget1 { width: 210px; height: 369px; }
#snaptarget2 { width: 362px; height: 276px; }
#snaptarget3 { width: 210px; height: 369px; }
.snaptarget-hover { background-color: #616A72; }
Sok, hosszú, rosszul formált!
Elsőként a kódot hozd működő állapotba pl. a http://jsfiddle.net -en, azt linkeld inkább. Ám még ott is túl sok ez, gondolom ha működne ez 2 mozgatható elemmel, akkor már meg tudnád oldani 6-tal is, ám mégis a css kétharmada eltűnne.
Húzd ki a kevésbé fontos kérdéseket, mivel túl sokat kérdeztél, ezért nehéz másnak hozzákezdeni.
A JS formázásra ügyeljél, elsőre nem is látszódik, hogy a drop-ban van egy draggable, pontosan használd a tab-okat, egy ilyen fontos rész ne vesszen el! Viszont több mindent elhagyhatsz, tesztelés szempontjából az opacity nem annyira érdekes, ki lehet hagyni, rövidítsd a kódot, hogy aki belenéz, az könnyebben lássa át! Vagy akár kommentet is írhatnál, az utolsó sor mit csinál? (egy-két szónál több nem kell, ám néha annyi hasznos tud lenni) Bár lelövöm a poént, induláskor a $(".item") üres.
Oké, veszem az adást -
Kiszedtem a kódból ami nem szükséges, és elkészítettem a JS Fidle demót is.
erre gondolsz? accept: ".mozgat"
A "lelőtt poént" sajnos nem tudom értelmezni, mert mint az elején jeleztem, nem értek a javascripthez. Megfogalmaznád kérlek úgy, hogy még egy ilyen hozzá nem értőnek is érthető legyen?
Re
- a törlés gombot egyszerűen bele kell tenni a div-be (és megadni, hogy csak akkor látszódjon, amikor az elemnek van tapad osztálya is)
- a harmadik és negyedik kérdésed ugyanarra vonatkozik, a pozíciókat máshogy kell kezelni, azt az elemet, amit mozgatsz azt tedd position: absolute-ba, sok kellemetlenségtől szabadulsz meg.
- ha a klónozott elemek is kapnak tapad osztályt, akkor tapadni fognak.
http://jsfiddle.net/T2HmG/1/
Köszönöm szépen
A törlés gombot megpróbálom beleintegrálni a javaslatod alapján, aztán ezzel akkor úgy tűnik minden a helyére került.
Mégegyszer köszönöm(!).
jQuery noConflict
Pontosan, ahogy írtad.
Bár nem TG vagyok,
Szerk:
Hoppá, sokáig volt nyitvahagyva a lap, Poetro megelőzött. Részemről törölhető.
Köszönöm mindkettőtöknek.
Az "fv" gondolom függvényt jelenthet. Namost, többször is előfordul ilyen }); izé, gondolom ez zárja le a függvényt, és nem tudom hány darab ilyen lehet a noconfilcton belül, vagy hogy mit jelent a "helyes lezárás"... Most már biztosan sejtitek mekkora láma vagyok ehhez.
A JS Fiddle homokozóban látható hogy mit építgetek, arról lenne szó.
Hányszor izé?...
function(paraméter){utasítás1;utasítás2;...;}Ez - így egyben - egy függvény (igen, fv-nek szoktam rövidíteni). A paraméter elhagyható.
Ha ezt beteszem egy - tetszőleges - utasítást vagy fv-t tartalmazó sorba (a "végére") zárójelek közé, akkor lesz belőle
Valami(function(paraméter){utasítás1;utasítás2;...;});Most direkt nem kódszínezőbe tettem, hogy egy sorban láthasd. Ennek a végén ott az "izé", ami egyrészt a Valami utasítás paraméterének záró-zárójele a "programsor vége" jellel, másrészt a névnélküli fv utasítászárójelének "bezáró fele".
A programozó számára a jobb átláthatóság érdekében szoktunk ugye (itt-ott) sortörést, tabulátort használni a kódokban. Emiatt fordulhat elő, hogy "magában" látod az "izét".
A fv-ek egymásba ágyazása "adott mélységig" lehetséges. Nem tudok arról, hogy a jQuery-ben ez meg lenne határozva (:)), viszont erősen függ a futtató környezet (böngésző, oprendszer) erőforrásaitól (vas).
Ha a verem túlcsordul, akkor aztán lesz conflict...