jQuery - draggable widget
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abfrage
bekommen
code
grafik
hit
http
idee
installation
jemand
kleines problem
log
modul
objekt
problem
raster
stehen
tip
url
ziehen
zitat
-
Hallo zusammen
Ich hoffe ich kann mein Problem gut genug erklären, dass ihr euch etwas drunter vorstellen könnt.
Ich möchte eine Grafik anhand eines Raster verschieben -> soweit kein Problem, dafür gibt es das draggable widget mit der Option grid.
Jetzt möchte ich aber auch, dass diese Grafik nicht über anderen Grafiken, die bereits im Raster vorhanden sind, positioniert werden kann.
Beispiel:
Das Raster zeigt eine Baustelle auf dem Gebäude platziert werden sollen.
Bereits gebaute Gebäude stehen fest und blockieren verständlicherweise den Platz für neue Bauten also kann das neu zu errichtende Gebäude zwar auf dem Raster platziert werden aber nur dort, wo nicht schon etwas anderes steht.
Das verhalten des zu platzierenden Objektes ist mir dabei fast egal. also ob es beim loslassen der Maus an den Rand der bereits bestehenden Objekte springt oder zurück zum Ausgangsort oder ob dies direkt beim ziehen abgefragt wird und ich so gar nicht erst über andere Objekte ziehen kann.
Bietet das widget mir dazu auch eine Standard Option, die ich bisher noch nicht gefunden habe oder wie könnte ich eine solche Abfrage integrieren?
Merci für Eure Tipps.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Mit zusätzlichen Plugins schon. Als Beispiel: hier.
Das wär JQuery UI Draggable Collision.
Hab die einen oder anderen Plugins gefunden, aber keins macht perfekt, das was du willst. Das beste ist das genannte, aber das muss man blöd konfigurieren und wird bei vielen divs mühsam.
Am besten scriptest du dir einfach selbst was.
Beitrag zuletzt geändert: 19.12.2014 17:19:02 von c143 -
Jetzt hab ich ein kleines Problem bei der Umsetzung.
Auf JSfiddle bekomm ich es hin.
Auf meinem lokalen und dem Lima Server bekomme ich das draggable hin, nicht aber das Modul draggable-collision.
Ich verwende jquery 1.11.2, jquery.ui 1.11.2, jquery-collision 1.0.2
wenn ich jetzt auch noch jquery-draggable-collision starten will funktioniert drag&drop gar nicht mehr.
Kann angeschaut werden auf http://www.airfieldmanager-game.de/ und dann im linken Menü auf Geländeübersicht.
Die Felder in cyan und gelb solten dragable sein das schwarze nicht.
Da ich aufgrund des Fehler nicht vermute, dass es an dem von mir kreirten code liegt poste ich keine script-Schnipsel.
Vielleicht hat jemand eine Idee was ich noch anders machen kann um es zum laufen zu bekommen? :( -
Falsche jQuery Version?
Zitat aus http://sourceforge.net/p/jquidragcollide/wiki/Home/#installation
Make sure that jquery 1.8.3 or later is somewhere accessible
Make sure that jqueryui 1.9.2 or later is somewhere accessible
Make sure that jquery-collision 1.0.2 or later is somewhere accessible
Beitrag zuletzt geändert: 20.12.2014 22:49:19 von spackenheimer -
spackenheimer schrieb:
Falsche jQuery Version?
Zitat aus http://sourceforge.net ...
Den Beitrag direkt vor deinem hast Du gelesen?
airfield-manager schrieb:
Ich verwende jquery 1.11.2, jquery.ui 1.11.2, jquery-collision 1.0.2 -
Eine Version kann auch zu neu sein...
Zitat von jQuery Website:
The jQuery 1.x line had major changes as of jQuery 1.9.0. We strongly recommend that you also use the jQuery Migrate plugin if you are upgrading from pre-1.9 versions of jQuery or need to use plugins that haven't yet been updated. Read the jQuery 1.9 Upgrade Guide and the jQuery 1.9 release blog post for more information.
Beitrag zuletzt geändert: 21.12.2014 0:30:26 von spackenheimer -
Habe nun versucht das ganze mal ohne das Modul
drag-collision zu erstellen.
Ist nicht ganz das was ich wollte aber funktioniert auch ;)
Jetzt habe ich nur noch ein kleines Problem.
Ich kann abfragen ob neue Objekte mit bereits bestehenden Objekten kollidieren, aber nicht ob zwei neue Objekte kollidieren.
Hier mal ein wenig Code dazu (Mit diesem Code kann das ganze auf der Webseite angeschaut werden - link siehe im ersten Beitrag)
$(".drag").draggable({ grid: [10, 10], obstacle: ".objectFix", preventCollision: true, snap: ".objectFix, .drag", snapMode: "outer", snapTolerance: 10, containment: "#estateIner", //revert: "valid", //Springt zum Ausgang, wenn über droppable losgelassen wird. revert: function(){ var HIT = $(".drag").collision( ".objectFix"); if(HIT.length <1) { console.log("false"); return(false); } else { console.log(HIT); return(true); }; } }); $(".drag, .objectFix").droppable({ });
Alle neuen Objekte bekommen die Klasse .drag wenn ich diese aber bei der Collision abfrage habe ich immer ein Positives Ergebnis (vermutlich weil das Objekt mit sich selber kollidiert)
Da ich nicht weiss wieviele neue Objekte angezigt werden ist es auch nicht möglich diese mit fixen IDs zu programmieren.
Kann ich während dem Drag eine Klasse löschen? Dann könnte ich anhand dieser gelöschten Klasse abfragen.
Mein bisheriger versuch hat allerdings immer nur im ersten Objekt dieser Klasse Änderungen vollzogen.
Der Versuch dazu sah so aus:
$(".drag").draggable({ start: function(){$(this).removeClass("dragTest")}, stop: function(){$(this).addClass("dragTest")}, });
Vielleicht hat noch jemand eine Idee, wie ich das hinbekommen könnte.
EDIT: Ich habe eine Lösung gefunden.
Für alle die es interessiert:
Ich arbeite mit der Funktion draggable vom jQuery.UI und mit dem Modul http://e-smartdev.com/en/#!jsPluginList/hittestJQuery, welches ich ein wenig auf meine Bedürfnisse angepasst habe.
Falls jemand das gleiche Problem hat wie ich und die Lösung etwas genauer braucht der darf mich gern anschreiben - dann kann ich gern Tipps geben, wie es bei mir aussieht ;)
Ich lasse mein Ergebniss noch ein paar Tage im Öffentlichen Bereich meiner Seite stehen, bevor es dann wieder ausschliesslich in den internen Bereich wandert. (Falls euch das Ergebnis interessiert und ihr es euch anschauen wollt.)
Merci an alle die sich mit dem Thema auseinandergesetzt haben.
Beitrag zuletzt geändert: 27.12.2014 19:13:01 von airfield-manager -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
