uiLayer.draggable({
elem: '#' + id,
group: "resizeDiv",
axis:axis,
hint: function(e) {
var divOnResize = $("<div id='divOnResize' ></div>");
divOnResize.appendTo(that.$el);
divOnResize.addClass("resize-div");
divOnResize.css("width", cssProperty.width);
divOnResize.css("height", cssProperty.height);
divOnResize.css("left", cssProperty.left);
divOnResize.css("top", cssProperty.top);
return divOnResize;
},
dragstart: function (e) {
console.log("It started");
},
dragend: function (e) {
// var divOnResize = that.$el.find("#divOnResize");
// divOnResize.remove();
}
});当我沿 y 轴拖动元素时，提示的 css left 属性发生变化并变得等于被拖动的元素的属性。我不想在沿 y-axis 拖动时更改 left 和 width ，在沿 x-axis 拖动时更改 height 和 top 。这个可以吗？？如果是，怎么办？？
最佳答案
您可以使用选项组合:container 和 axis，如下所示 Kendo UI draggable
axis:将提示移动限制在水平 (x) 或垂直 (y) 轴上。container:使用这个提示可以将移动限制在容器边界
请参见下面的示例片段:我将 axis 方向设为“y”并且 container 是父元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"></script>
</head>
<body>
<div id="container">
<div id="draggable"></div>
</div>
<script>
$("#draggable").kendoDraggable({
axis: "y",
hint: function(element) {
return element.clone();
},
container: $("#container")
});
</script>
<style>
#container {
width: 150px;
height: 150px;
border: 1px dashed red;
}
#draggable {
width: 50px;
height: 50px;
background-color: orange;
border: 2px solid green;
}
</style>
</body>
</html>关于jquery - 提示(Kendo UI)的 Css 属性在拖动时发生变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26886762/