drag & drop for other modules

[Olli]

hello,

i like the drag & drop feature for sorting pages inside the latest WebsiteBaker very much.
i would like to include this feature into my own modules aswell. i looked though the forum, but i was not able to find any useful information on this.
i looked into the WB code, but for some reason i could not get it to work. i suppose i forgot something...

has anybody included this into their own module already? what is needed to be done for this? can you help me out?

thanks a lot

[chio]

There are lots of request for this feature.
The module MPForm has Drag&Drop.

I wished, someone writes a "How to", to implement Drag&Drop easy to any module.

[Olli]

hey chio,

thanks for pointing me to that module. will implement it into my module the next days and tell you how.

thanks

[Stefek]

Hello Olli, Hello Chio,
there is another Module which uses this technique.

so see here for another example:
http://www.websitebaker2.org/forum/index.php/topic,14982.0.html

I hope this helps.

I'm also interested in a implementation how to

Kind Regards,
Stefek

[Waldschwein]

Hello!

Well, the best would be a module that uses jQuery1.4 for drag&drop and a tutorial that explains how to move from YUI drag&drop to jQuery. That would even help the Core Developer.  I doubt in future releases beyond 2.8.1 YUI would be included by default...

Yours Michael

[Olli]

hello waldschwein,

so jQuery is the way to go you say?

i think this is what i need for this then i guess...
http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

but how to i put the new sorting-order to the database? i have never written any ajax requests on my own yet...
but will look closer to this the next days and will post the final result with turorial steps here.

thanks

[doc]

Hallo Olli,

mit dem Plugin habe ich vor gut 1.5 Jahren mal ein Kundenmodul gebaut, um Drag & Drop von Einträgen zu im Backend zu ermöglichen. Wenn Du mit jQuery und Ajax ins straucheln geraden solltest, kannst Du ja mal nen Blick ins "Post-Its" Modul werfen. Dort werden einige Ajax basierte Datenbankupdates mit der jQuery Ajax Schnittstelle und PHP/MySQL durchgeführt. Quellcode sollte gut genug kommentiert sein.

Schön zu sehen, dass jQuery langsam auch für UI verwendet wird und nicht nur für reine DOM Manipulation oder grafische Effekte bei Bildergallerien.

Doc

[chio]

Super, auf der Demo-Seite
http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
steht sehr viel was man wissen muss.

Is there spme help how to integrate jquery into the backend - so that it works also if there are multiple sections?

[doc]

Hi,

witzig. Den gleichen Link habe ich vor 1.5 Jahren gepostet
http://www.websitebaker2.org/forum/index.php/topic,3029.msg67257.html#msg67257

Gruss Doc

[Olli]

hey an alle

danke für das feedback und die infos. ich melde mich, wenn ich fertig bin mit dem einbauen.

viele grüße

[chio]

Ja, aber wie nutzt man jQuery im Backend? Ich meine so, dass es sich nicht mit anderen Modulen schlägt, die ebenfalls jQuery nutzen.

AJAX ist ja an sich nicht so schwierig, da braucht man gar kein jQuery dazu. Aber man braucht etwas PHP, um die neue Sortierung wieder in die Datenbank zu übertragen.
Ich habe mir gerade die erweiterte order.class in MPForm angeschaut, da steige ich aber nicht recht durch..

[doc]

Hi,

Ja, aber wie nutzt man jQuery im Backend? Ich meine so, dass es sich nicht mit anderen Modulen schlägt, die ebenfalls jQuery nutzen.

Versteh die Frage nicht ganz. Meinst Du die Einbindung oder von welchen Effekten sprichst Du? Wenn man in seinen Modulen $(document).ready(...) verwendet, sollten eigentlich keine Probleme entstehen.

Sind auch mehrere dieser Konstrukte pro Seite möglich, diese werden dann nacheinander abgehandelt. Zum sortieren einer Tabelle muss ja nur das DOM fertig sein, sprich Tabellenstruktur geladen, dann kann man die Drag & Drop Event Handler drauf loslassen. Hatte bisher noch keine Probleme mit den Modulen, welche dies verwendet haben.

Eventuell nochmal näher beschreiben, wenn ich was nicht verstanden haben sollte. Das PHP für das Datenbankupdate beim verschieben von Seiten im Seitenbaum wäre im WB Core bereits enthalten. Für Module müsste eine einheitliche Sortier ID etc. eingeführt werden (am besten wählbar). So könnte man ne API bauen, welche auch andere Module einfach nutzen können.

Doc

[chio]

Gibt es eigentlich Module, die jQuery im Backend nutzen? Da könnte ich ja schauen, wie das geht.

Anders gefragt: Gibt es sowas wie ein: "Tu das, dann das, - nein, das nicht! - aber dann das..." 

[crnogorac081]

Hi,

the PM module from my signature use JQ for autosuggestion.. Im trying to keep up

[doc]

@Chio: Das "Post-its" Modul verwendet jQuery, wie bereits hier gepostet. Es nimmt aber nicht die jQuery Datei aus dem WB /include Ordner, sondern bringt ein eigenes mit. Wenn ich mich recht entsinne, war das Modul das erste, welches jQuery verwendet hat. Die Grundzüge sollten aber aus dem Modul klar werden.

Doc

[chio]

Ich meine: Gibt es einen "Standard", wie ein Modul jQuery im Backend nutzen kann, ohne sich mit anderen Modulen in die Haare zu geraten?

Das "eigene" jQuery mitnehmen; das geht ja in der modify.php eines Modules nicht, wenn andere Module das ebenfalls machen. Außerdem ist das ja nicht Sinn der Sache, dazu ist jQuery ja im Core.

[doc]

Hi,

im Backend wird jQuery per Default eingebunden (WB 2.8.1 SVN) und steht somit auf Seiten in "modify.php" oder "tool.php" (Page/Admin tool) ohne weiteres zutun zur Verfügung. In die Quere kommt sich nichts, wenn alle jQuery Funktionen in document.ready gewrappt werden und es keine "mehrdeutigen" Funktionsnamen gibt.

Hat man weitere "Backend" Seiten wie z.B. ne "config.php", muss man sich um die Einbindung von jQuery selbst kümmern, genauso wie um die Absicherung dieser Seite vor unbefugtem Zugriff. In meinen Modulen erledige ich das mit einer "angepassten" admin Klasse, bzw. Funktion. Siehe z.B. AFE (functions.inc.php --> myAdminHandler). Über die Anpassung können CSS, JS Dateien eingebunden werden.

Im Frontend brauchts die register_frontend_m odfiles. Weiss nicht ob jQuery dann automatisch geladen wird. Falls nicht halt noch ne frontend.js oder frontend_body.js.

Doc

[Luisehahne]

Weiss nicht ob jQuery dann automatisch geladen wird.

Du brauchst nur statt js jquery eingeben, dann werden basis jquery scripte eingebunden, nur für die css musst du selber sorgen oder das modul.

Dietmar

[chio]

Euch muss man alles aus der Nase ziehen

Wäre mal schön ein Tutorial, wie das genau geht und was man so machen kann.

[doc]

Hi,

Euch muss man alles aus der Nase ziehen

Naja Deine Anfragen bzw. "Antworten" auf Posts sind teils auch recht unspezifisch
Wenn ich Olli richtig verstanden habe, musst du nur ein bischen warten bis er mit seinem Modul fertig ist. Dann posted er seine Lösung inkl. nem kleinen Tutorial.

Doc

[crnogorac081]

Hi,

I hope I will post a tutorial soon how to reorder members from members module via drag n drop

So far it is working with one group..


cheers

[Olli]

@crnogorac081:

did you make any progess yet? hadn't had time to do this on my own yet. will try to use the function from the WB core this evening.

[chio]

crnogorac sent me a working adapted members-module, and I made some more changes. It works on my localhost, but it doesnt work on my website. Dont know why..

You can have this version, but its not finished yet, I dont even know if it can be installed clean.

[doc]

Hi,

It works on my localhost, but it doesnt work on my website.

Assuming both installations are identical, I would check for wrong absolute URLs in the Ajax or Javascript related parts of the modified files.

Doc

[crnogorac081]

it works both on my local host and live server..

@chio

Could it be that you used it on two differnt WB versions:  2.8 and 2.8.1 ? and that it is not working on 2.8.1 ?

edit:

if yes -> there is an issue with wb 2.8.1 admin template... you must enable (uncoment) jquery-ui script in footer.htt in backend themes (or only the one you are using..). And this jquery-ui script is not comented in 2.8 so it works there without touching footer.htt

Ivan

edit2:

Here is css code, for backend.css and 2 files attached with tutorial how to use it.

Code:

#dragTable li {
    list-style: none;
    margin-top: 3px;
    width: 95%;
    list-style: none;
    padding: 2px;
    background-color:#F0F0F0;
    border: #CCCCCC solid 1px;
    color:#fff;
}

#dragResult {
    width: 90%;
    padding-left:10px;
}