All Components

Drag and Drop / Events

Drag the small circle here.

Console log

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Events</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> 
   <script>
                function draggableOnDragStart(e) {
                    kendoConsole.log("dragstart");

                    $("#draggable").addClass("hollow");
                    $("#droptarget").text("Drop here.");
                    $("#droptarget").removeClass("painted");
                }

                function draggableOnDrag(e) {
                    kendoConsole.log("drag");
                }

                function draggableOnCancel(e) {
                    kendoConsole.log("drag cancel");
                }

                function draggableOnDragEnd(e) {
                    kendoConsole.log("dragend");

                    var draggable = $("#draggable");

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

                    draggable.removeClass("hollow");
                }

                function droptargetOnDragEnter(e) {
                    kendoConsole.log("dragenter");

                    $("#droptarget").text("Now drop...");
                    $("#droptarget").addClass("painted");
                }

                function droptargetOnDragLeave(e) {
                    kendoConsole.log("dragleave");

                    $("#droptarget").text("Drop here.");
                    $("#droptarget").removeClass("painted");
                }

                function droptargetOnDrop(e) {
                    kendoConsole.log("drop");

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

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

                    $("#droptarget").kendoDropTarget({
                        dragenter: droptargetOnDragEnter,
                        dragleave: droptargetOnDragLeave,
                        drop: droptargetOnDrop
                    });
                });
            </script> 
   <div class="box"> 
    <h4>Console log</h4> 
    <div class="console"></div> 
   </div> 
   <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>