Css property of Hint (Kendo UI) changing on dragging

Question

Css property of Hint (Kendo UI) changing on dragging

1.3k views Asked by Mayur Lunawat At 12 November 2014 at 12:13

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();
                }
            });

When I drag the element along y axis the css left property of the hint changes and becomes equal to that of the element which is dragged . I dont want to change the left and width while dragging along y-axis and height and top while dragging along x-axis . Can this be done ?? If so ,how??

Original Q&A

There are 2 answers

**Koti Panga** · Answer 1 · 2014-11-12 19:30:12

You can use options combination: container and axis like below in Kendo UI draggable

axis : Constrains the hint movement to either the horizontal (x) or vertical (y) axis.
container : With this hint movement can be constrained to the container boundary

See below example snippet: I took axis direction as "y" and container is parent element.

<!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>

**Mayur Lunawat** · Answer 2 · 2014-11-17 06:49:24

 hint: function(e) {
                    return e.clone().css({
                        "width":(cssProperty.width),
                        "height":(cssProperty.height)
                    }).addClass('resize-div');
                }

This is how I can change hint property of an element . Still not sure about how to change the maxWidth , minWidth , maxHEight, minHeight.

TechQA.

Css property of Hint (Kendo UI) changing on dragging

There are 2 answers

Related Questions in JQUERY

Related Questions in CSS

Related Questions in KENDO-UI

Related Questions in HINT

Popular Questions

Popular Tags

Trending Questions