Enable Dragging for the Drag Handle of the Switch
Environment
| Product | Progress® Kendo UI® Switch for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I enable the users to slide the Switch to reveal its second value?
Solution
The following example demonstrates how to enable the dragging of the Switch drag handle.
<input type="checkbox" id="switch" />
<script>
var sliding = false;
var position;
var handle;
var constrain;
var RESOLVEDPREFIX = kendo.support.transitions.css === undefined ? "" : kendo.support.transitions.css;
var TRANSFORMSTYLE = RESOLVEDPREFIX + "transform";
var switchButton = $("#switch").kendoSwitch({
checked: true,
width: 200,
messages: {
checked: "Yes",
unchecked: "No",
},
change: function (e) {
if (sliding) {
e.preventDefault();
sliding = false;
}
}
}).data("kendoSwitch");
handle = switchButton.wrapper.find(".k-switch-handle");
var userEvents = new kendo.UserEvents(switchButton.wrapper, {
start: _start,
move: _move,
end: _stop
});
function limitValue(value, minLimit, maxLimit) {
return Math.max(minLimit, Math.min(maxLimit, value));
}
function _start() {
if(!switchButton.options.enabled) {
userEvents.cancel();
} else {
userEvents.capture();
constrain = kendo._outerWidth(switchButton.wrapper, true) - kendo._outerWidth(handle, true);
position = 0;
handle.addClass("k-active");
}
};
function _stop(e) {
var checked = position > constrain / 2;
sliding = false;
handle.removeClass("k-active");
switchButton.check(checked);
switchButton.trigger("change", { checked: checked });
sliding = true;
handle.css(TRANSFORMSTYLE, "");
};
function _move(e) {
var value = limitValue(position + e.x.delta, -constrain, constrain);
e.preventDefault();
position = value;
handle.css(TRANSFORMSTYLE, "translatex(" + position + "px)");
}
</script>