Преглед изворни кода

[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 година
родитељ
комит
9fe1d25
1 измењених фајлова са 24 додато и 1 уклоњено
  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) {