Browse Source

[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 10 năm trước cách đây
mục cha
commit
9fe1d25

+ 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) {