jQuery drag & drop + clone

KapulaGábor · 2013. Jan. 8. (K), 14.44

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:

<div class="col-1">
<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">
<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>


<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">&nbsp;</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>

Eddig jutottam a jQuery-vel

<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>


<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>

És ez itt a CSS

* { 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; }


* { 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; }

Ha csak valamely részhez tudsz megoldást adni, azt is köszönöm.

■

HTML, CSS, JavaScript, Ajax

csirip

Sok, hosszú, rosszul formált!

T.G · 2013. Jan. 8. (K), 23.42

Sok a kérdés, hosszú a kódrészlet, nem jól olvasható a kód. Ezek miatt nem kap az ember könnyen még iránymutatást sem.

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Oké, veszem az adást -

KapulaGábor · 2013. Jan. 9. (Sze), 19.07

Oké, veszem az adást - köszönöm a javaslatod.
Kiszedtem a kódból ami nem szükséges, és elkészítettem a JS Fidle demót is.

a drop-ban van egy draggable

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?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Re

T.G · 2013. Jan. 10. (Cs), 08.57

- az új elemeknél meg kell tartani a mozgat osztályt és akkor mozgatásuk esetén a droppable ugyanúgy fog működni.
- 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/

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Köszönöm szépen

KapulaGábor · 2013. Jan. 10. (Cs), 21.30

Hát tudod... szóhoz sem jutok. TG, nagyon szépen köszönöm.
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(!).

A hozzászóláshoz regisztráció és belépés szükséges
új téma

jQuery noConflict

KapulaGábor · 2013. Jan. 23. (Sze), 23.00

TG, szeretnék mégegyet kérdezni: hogyan lehet egy ilyen

<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// szerintem ide jönne a lényeg...
});
</script>


<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
  // szerintem ide jönne a lényeg...
  });
</script>

dologba becsomagolni mindent amit csináltunk?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Pontosan, ahogy írtad.

Poetro · 2013. Jan. 24. (Cs), 01.23

Pontosan, ahogy írtad.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Bár nem TG vagyok,

Pepita · 2013. Jan. 24. (Cs), 01.55

de úgy, hogy odaírod. Lehet egy fv-en belül több fv-ed is, figyelj, hogy mind helyesen legyen lezárva. Oda kerül a lényeg, ahova írtad.

Szerk:
Hoppá, sokáig volt nyitvahagyva a lap, Poetro megelőzött. Részemről törölhető.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Köszönöm mindkettőtöknek.

KapulaGábor · 2013. Jan. 25. (P), 19.25

A problémám abból fakad, hogy nem értek a javascripthez, ezért kérdezek ilyeneket.

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ó.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Hányszor izé?...

Pepita · 2013. Feb. 1. (P), 16.30

többször is előfordul ilyen }); 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".

hány darab ilyen lehet a noconfilcton belül

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...

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés