Explorar el Código

[core] Add ko binding for draggable

This adds a KO binding that activates jQuery draggable for the element. It will update the given horizontalPercent observable with the location of the draggable in percent relative to the given container. For now it just supports horizontal dragging, we can add more options when we need them.
Johan Ahlen hace 10 años
padre
commit
9fe1d25
Se han modificado 1 ficheros con 24 adiciones y 1 borrados
  1. 24 1
      desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

+ 24 - 1
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -642,7 +642,30 @@ ko.bindingHandlers.daterangepicker = {
       matchIntervals(true);
     }
   }
-}
+};
+
+ko.bindingHandlers.draggable = {
+  init: function (element, valueAccessor) {
+    var options = valueAccessor();
+    var $container = $(options.container);
+
+    var dragTimeout = -1;
+    var onDrag = function(event, ui) {
+      window.clearTimeout(dragTimeout);
+      dragTimeout = window.setTimeout(function () {
+        var percentage = ((ui.offset.left - $container.position().left) / $container.width()) * 100;
+        options.horizontalPercent(Math.max(Math.min(percentage, options.limits.max), options.limits.min));
+      }, 100);
+    };
+
+    $(element).draggable({
+      axis: options.axis,
+      containment: $container,
+      drag: onDrag,
+      helper: 'clone'
+    });
+  }
+};
 
 ko.bindingHandlers.oneClickSelect = {
   init: function (element) {