All Components

Drag and Drop / Basic usage

Drag the small circle here.

Axis

cursorOffset

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Basic usage</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example"> 
   <div class="demo-section k-content"> 
    <div id="droptarget" class="k-header">
     Drag the small circle here.
    </div> 
    <div id="draggable"></div> 
   </div> 
   <div class="box wide"> 
    <div class="box-col"> 
     <h4>Axis</h4> 
     <ul class="options"> 
      <li><select id="axis"> <option value="">(none)</option> <option value="x">Horizontal (x)</option> <option value="y">Vertical (y)</option> </select> </li> 
     </ul> 
    </div> 
    <div class="box-col"> 
     <h4>cursorOffset</h4> 
     <ul class="options"> 
      <li><label for="cursorOffset"><input type="checkbox" id="cursorOffset"> Enable <code>cursorOffset</code></label></li> 
     </ul> 
    </div> 
   </div> 
   <script>
                function draggableOnDragStart(e) {
                    $("#draggable").addClass("hollow");
                    $("#droptarget").text("Drop here.");
                    $("#droptarget").removeClass("painted");
                }

                function droptargetOnDragEnter(e) {
                    $("#droptarget").text("Now drop...");
                    $("#droptarget").addClass("painted");
                }

                function droptargetOnDragLeave(e) {
                    $("#droptarget").text("Drop here.");
                    $("#droptarget").removeClass("painted");
                }

                function droptargetOnDrop(e) {
                    $("#droptarget").text("You did great!");
                    $("#draggable").removeClass("hollow");
                }

                function draggableOnDragEnd(e) {
                    var draggable = $("#draggable");

                    if (!draggable.data("kendoDraggable").dropped) {
                        // drag ended outside of any droptarget
                        $("#droptarget").text("Try again!");
                    }

                    draggable.removeClass("hollow");
                }

                $(document).ready(function() {
                    $("#draggable").kendoDraggable({
                        hint: function() {
                            return $("#draggable").clone();
                        },
                        dragstart: draggableOnDragStart,
                        dragend: draggableOnDragEnd
                    });

                    $("#droptarget").kendoDropTarget({
                        dragenter: droptargetOnDragEnter,
                        dragleave: droptargetOnDragLeave,
                        drop: droptargetOnDrop
                    });

                    var draggable = $("#draggable").data("kendoDraggable");

                    $("#cursorOffset").click(function(e) {
                        if (this.checked) {
                            draggable.options.cursorOffset = { top: 10, left: 10 };
                        } else {
                            draggable.options.cursorOffset = null;
                        }
                    });

                    $("#axis").change(function(e) {
                        draggable.options.axis = $(this).val();
                    });
                    
                    $("#axis").kendoDropDownList({
                    });
                });
            </script> 
   <style>
                #draggable {
                    cursor: move;
                    position: absolute;
                    top: 260px;
                    left: 50%;
                    margin-left: -28px;
                    width: 56px;
                    height: 56px;
                    border-radius: 50%;
                    background-color: #03a9f4;
                    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
                }
                .painted {
                    background-color: #03a9f4;
                    color: #fff;
                }
                
                #draggable.hollow
                {
                    cursor: default;
                    background: #ececec;
                }
                
                #droptarget
                {
                    height: 200px;
                    width: 200px;
                    font-size: 14px;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 200px;
                    margin: 0 auto;
                    cursor: default;
                    border: 1px solid #999;
                }

                .demo-section
                {
                    height: 300px;
                    position: relative;
                }
            </style> 
  </div>   
 </body>
</html>