可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I need to simulate a desktop icon drag and drop, i do this:

    $(".draggable").kendoDraggable({                     container: $("#desktop"),                     hint: function() {                          return $(".draggable").clone();                     },                     dragend: function(e) {                           console.log(e);                          console.log(e.currentTarget.attr("src"));                          e.currentTarget.css("top",e.y.location);                          e.currentTarget.css("left",e.x.location);                     }                           });

but im not sure if is a nice way and the drag roll back effect break my solution.

Hava a simple way to do this with KendoUI (No Jquery UI draggable).

Any Help!

回答1:

I did this in the past as follow:

Defined the following CSS styles

.draggable {     position: absolute;     background: #aaaaaa;     width: 100px;     height: 100px;     vertical-align: middle; }  .ob-hide {     display: none; }  .ob-clone {     background: #cccccc; }

(you actually only need ob-hide).

Define the draggable as:

$('.draggable').kendoDraggable({     hint     : function (original) {         return original.clone().addClass("ob-clone");     },     dragstart: function (e) {         $(e.target).addClass("ob-hide");     } });

Define the area on which to move as:

$('body').kendoDropTarget({     drop: function (e) {         var pos = $(".ob-clone").offset();         $(e.draggable.currentTarget)                 .removeClass("ob-hide")                 .offset(pos);     } })

My HTML is:

<body style="padding: 0; margin: 0; "> <div id="drop" style="position: absolute; width: 100%; height: 100%; border: 2px solid #000000">     <div class="draggable">         Drag 1     </div>     <div class="draggable">         Drag 2     </div> </div> </body>

文章来源: Kendo Ui draggable like windows desktop

标签

draggable

desktop

kendo