pmwiki-utils.js add "draggable".

git-svn-id: svn://pmwiki.org/pmwiki/trunk@4764 524c5546-5005-0410-9a3e-e25e191bd360

1 files changed, 37 insertions, 11 deletions

diff --git a/pub/pmwiki-utils.js b/pub/pmwiki-utils.js
index c15dab6e..0dd8c371 100644
--- a/pub/pmwiki-utils.js
+++ b/pub/pmwiki-utils.js
@@ -28,6 +28,7 @@
   
   function aE(el, ev, fn) {
     if(typeof el == 'string') el = dqsa(el);
+    else if(el instanceof Element) el = [el];
     for(var i=0; i<el.length; i++) el[i].addEventListener(ev, fn);
   }
   function dqs(str)  { return document.querySelector(str); }
@@ -36,10 +37,14 @@
   function tap(q, fn) { aE(q, 'click', fn); };
   function pf(x) {var y = parseFloat(x); return isNaN(y)? 0:y; }
   function zpad(n) {return (n<10)?"0"+n : n; }
-  function adjbb(el, html) { el.insertAdjacentHTML('beforebegin', html); }
-  function adjbe(el, html) { el.insertAdjacentHTML('beforeend', html); }
-  function adjab(el, html) { el.insertAdjacentHTML('afterbegin', html); }
-  function adjae(el, html) { el.insertAdjacentHTML('afterend', html); }
+  function adjany(el, where, what) {
+    if(what instanceof Element) el.insertAdjacentElement(where, what);
+    else el.insertAdjacentHTML(where, what);
+  }
+  function adjbb(el, what) { adjany(el, 'beforebegin', what); }
+  function adjbe(el, what) { adjany(el, 'beforeend',   what); }
+  function adjab(el, what) { adjany(el, 'afterbegin',  what); }
+  function adjae(el, what) { adjany(el, 'afterend',    what); }
   function getLS(key, parse) {
     try {
       var x = window.localStorage.getItem(key)|| null;
@@ -615,12 +620,12 @@
       Dropzone.pmareq = areq;
     }
  
-    form.insertAdjacentElement('afterbegin', Dropzone);
-    aE([Dropzone], 'dragenter', dragenter);
-    aE([Dropzone], 'dragover', dragenter);
-    aE([Dropzone], 'dragleave', dragleave);
-    aE([Dropzone], 'drop', dragdrop);
-    tap([Dropzone], clickzone);
+    adjab(form, Dropzone);
+    aE(Dropzone, 'dragenter', dragenter);
+    aE(Dropzone, 'dragover', dragenter);
+    aE(Dropzone, 'dragleave', dragleave);
+    aE(Dropzone, 'drop', dragdrop);
+    tap(Dropzone, clickzone);
   }
   
   async function postUpload(file) {
@@ -752,11 +757,32 @@
     Dropzone.appendChild(a);
   }
   
+  function makeDraggable(par) {
+    var children = par.children;
+    if(children.length<2) return;
+    for(var i=0; i<children.length; i++) {
+      var child = children[i];
+      child.draggable = true;
+    }
+    par.style.cursor = "move";
+    aE(par, 'dragstart', function(e){ this.dragged_element = e.target; });
+    aE(par, 'dragover', function(e){e.preventDefault();});
+    aE(par, 'drop', function(e){
+      var c = [...this.children], d = this.dragged_element, t = e.target;
+      if(!d || d==t) return;
+      var b = c.indexOf(t) < c.indexOf(d) ? t : t.nextSibling;
+      this.insertBefore(d, b);
+    });
+  }
+  function init_draggable() {
+    var els = dqsa('.draggable');
+    for(var el of els) makeDraggable(el);
+  }
 
   function ready(){
     wikitext = document.getElementById('wikitext');
     var fn = [autotoc, inittoggle, PmXMail, localTimes, 
-      highlight_pre, copy_pre, confirmForms, init_dropzone];
+      highlight_pre, copy_pre, confirmForms, init_dropzone, init_draggable];
     fn.forEach(function(a){a();});
     makesortable();
   }