ソースを参照

[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 年 前
コミット
9fe1d25f12

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