如何创建KENDO Draggable DIV？

本文介绍了如何创建KENDO Draggable DIV？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 大家好 这是sohaib在这里，我在巴基斯坦使用asp.net技术和kendo UI担任软件工程师。实际上我已经创建了动态Draggable DIVS，其中我的数据正在停留，并且还有一些空DIVS，其中我想像简单的拖放一样移动我的DIVS。当我将我的DIV放到其他DIV时，它确实使下一个DIV可拖动，但不会使发送者DIV像Drop Here一样掉线。我想获取DIV的ID被拖动，如何用空DIV内容替换拖动的DIV的HTML内容。 请建议我，因为我必须完成软件发布。 这是我的代码。 在这里输入代码 function draggableOnDragStart （e）{ DragSenderID = e.sender.element.attr（ id）; hiddenFieldId = e.sender.element.attr（ id）。replace（ draggable， ）; hiddenFieldId = ＃hiddenClass + hiddenFieldId; // alert（hiddenFieldId）; // alert（GadgetName）; GadgetName = $（hiddenFieldId）.val（）; kendoConsole.log（ dragstart： + DragSenderID + ： + GadgetName）; // var eId =＃+ e.target.id // $（eId）.width（$（eId）.width（）+px） ; // $（eId）.addClass（hollow）; // $（＃draggable）。width（$（＃draggable ）.width（）+px）; // $（eId） .text（Drop here）; // document.writeln（document.getElementById（'GadgetName'）。value）; // alert（DragSenderID）; // var hiddenValue = $（this）.c hildren（input.hidden）; // var $ node = $（DragSenderID）.children（input.hiddenClass）; // alert（$ node [0] .value）; // $（'。draggable input.hiddenFieldCounter'）。each（function（）{ // 提醒（$（this）.val（））; // } ）; // } // alert（e.sender.element.attr（value））; } function draggableOnDrag（e）{ kendoConsole.log（ 拖动： + DragSenderID）; } function draggableOnCancel（e）{ kendoConsole.log（ 拖动取消： + DragSenderID）; } function droptargetOnDragEnter（e）{ DropReceiverID = e.sender.element.attr（ id）; kendoConsole.log（ drag Enter： + DropReceiverID）; var eId = ＃ + e.target.id; droptTargetId = eId; // alert（我在droptargetOnDragEnter）; // $（eId）.text（现在你可以放弃它。）; } function droptargetOnDragLeave（e）{ kendoConsole.log（ 拖动）; var eId = ＃ + e.target.id; // alert（我在droptargetOnDragLeave）; // $（eId）.text（（Drop here））; } // function droptargetOnDrop（e）{ // var eId =＃+ e.target.id; // // $（eId）.text（你做得很棒！）; // // $（eId）.removeClass（hollow）; // //$(\"#droptTargetId\").html(\"<div class =droptarget>（ABCS）< / div>）; // alert（DropID：+ eId +：+DragID：+ droptTargetId）; // // alert（目的地ID：+ e.sender.element.attr（id））; // if（eId == droptTargetId）{ // alert（我有类似的值）; // return; // } // // alert（eLSE PART ）; // alert（目的地ID：+ e.sender.element .attr（id））; // $（eId ）.kendoD ropTarget（{ // dragenter：droptargetOnDragEnter， // dragleave：droptargetOnDragLeave， // drop：droptargetOnDrop // }）; // $（e.target.id）。 addClass（droptarget）; // $（e.target.id）。 removeClass（draggable）; // $ （droptTargetId）.kendoDraggable（{ // 提示：function（element）{ // $（＃droptarget）。text（（EHm））; // return element.clone（）; // }， // dragstart：draggableOnDragStart， // dragend：draggableOnDragEnd / / }）; // $（e.target.id）.addClass（draggable）; // $（e.target.id）.removeClass（droptarget）; // } function draggableOnDrag结束（e）{ kendoConsole.log（ 拖动结束） ; // alert（draggableOnDragEnd）; var eId = ＃ + e.target.id // alert（e.target.id）; // var abs = $（）。attr（id）; // alert（）; $（e.target.id）.addClass（ 中空）; var draggable = $（eId）; // if（draggable.data（kendoDraggable））{ // if（！draggable.data（kendoDraggable）。dropped）{ // //在任何droptarget之外拖动 // $（e.target.id）.text（再试一次！）; // } // } draggable.removeClass（ hollow）; // alert（draggableOnDragEnd）; } $（ 。droptarget）。kendoDropTarget（{ dragenter：droptargetOnDragEnter ， dragleave：droptargetOnDragLeave， drop：function DropOnTarget（e）{ kendoConsole.log（ drop： + DropReceiverID）; // var eId =＃+ e.target.id; // 警告（已删除）; // alert（SenderID：+ eId + ：+ReceiverID：+ e.sender.element.attr（id））; // // var target = dataSource.get（$（e.draggable.currentTarget）.data（id））， // // dest = $（e.target）; // // alert（目标：+ dest）; // // alert（element）; // // $（e.target）.text （你做得很棒！）; // alert（e .target）; // $（e.sender.element.attr （id））。html（< div class =droptarget>（再试一次））; / / if（！draggable.data（kendoDraggable）。dropped）{ // //在任何droptarget之外拖动 // alert（目的地ID：+ e.sender.element.attr（id））; // // } // alert（n）; // ++ n; // alert（n）; DropReceiverID = e.sender.element.attr（ ID）; // alert（SenderID：+ DragSenderID）; // alert（ReceiverID：+ DropReceiverID）; $（e.target）的.text（GadgetName）; // $（SenderID）.kendoDropTarget（{ // dragenter：droptargetOnDragEnter， // dragleave：droptargetOnDragLeave // // drop：droptargetOnDrop // }）; // $（SenderID）.addClass（droptarget）; // $（SenderID）.removeClass（draggable）; // $（＃droptarget）。html（< div class =test1>（Drop here）< / div>< div class =test2>（Drop $（e.target）.kendoDraggable（{提示：function（element）{ return element.clone （）; // kendoConsole.log（drassop）; }， dragstart：draggableOnDragStart， dragend：draggableOnDragEnd }）; $（e.target）.addClass（ draggable）; $（e.target）.removeClass（ droptarget）; // var $ target = $（e.target）; // changeStyle（e.draggable.hint，normal，allowed）; // $（e.draggable.hint）.clone（）。appendTo（$ target）[0] .style.cssText =; // $ target。追加（）; // // alert（e.target）; // $（e.target）.html（< div class =dragCounter>< / div>） ; // alert（DragSenderID）; // $（e.target.id）.text（Drop Here）; // // $（DragSenderID）.switchClass（）; // $（DragSenderID）.addClass（droptarget）; } // droptargetOnDrop }）; $（ 。draggable）。kendoDraggable（{提示：提示， dragstart：draggableOnDragStart，拖动：draggableOnDrag， dragcancel：draggableOnCancel， dragend：draggableOnDragEnd }） ; 函数提示（元素）{ return element.clone（）; } [edit]已添加代码块[/ edit] 解决方案 （hiddenFieldId）.VAL（）; kendoConsole.log（ dragstart： + DragSenderID + ： + GadgetName）; // var eId =＃+ e.target.id // （eId）.width（ （eId）.width（）+px）; // Hi Everyone this is sohaib ameen here and I am working as a software Engineer in pakistan with asp.net technology and kendo UI. Actually I have created dynamic Draggable DIVS in which my Data is Residing and there are some Empty DIVS as well in which I want to move my DIVS like simple drag and Drop. When I drop my DIV to Other DIV it does make the next DIV Draggable but does not make the sender DIV drop able like "Drop Here". I want to get the ID of DIV being Dragged and how can I replace the HTML Contents of dragged DIV with Empty DIV Content. Please do suggest me because I have to finalise a software Release. Here is my Code. enter code herefunction draggableOnDragStart(e) { DragSenderID = e.sender.element.attr("id"); hiddenFieldId = e.sender.element.attr("id").replace("draggable", ""); hiddenFieldId = "#hiddenClass" + hiddenFieldId; //alert(hiddenFieldId); //alert(GadgetName); GadgetName = $(hiddenFieldId).val(); kendoConsole.log("dragstart : " + DragSenderID + ":" + GadgetName);// var eId = "#" + e.target.id// $(eId).width($(eId).width() + "px");// $(eId).addClass("hollow"); //$("#draggable").width($("#draggable").width() + "px"); //$(eId).text("Drop here"); // document.writeln(document.getElementById('GadgetName').value); // alert(DragSenderID); //var hiddenValue = $(this).children("input.hidden"); // var $node = $(DragSenderID).children("input.hiddenClass"); // alert($node[0].value);// $('.draggable input.hiddenFieldCounter').each(function () {// alert($(this).val());// }); // } // alert(e.sender.element.attr("value")); } function draggableOnDrag(e) { kendoConsole.log("drag :" +DragSenderID); } function draggableOnCancel(e) { kendoConsole.log("drag cancel : " + DragSenderID); } function droptargetOnDragEnter(e) { DropReceiverID = e.sender.element.attr("id"); kendoConsole.log("drag Enter : " +DropReceiverID); var eId = "#" + e.target.id; droptTargetId = eId; // alert("I am in droptargetOnDragEnter "); //$(eId).text("Now you can drop it."); } function droptargetOnDragLeave(e) { kendoConsole.log("drag Leave"); var eId = "#" + e.target.id; //alert("I am in droptargetOnDragLeave "); //$(eId).text("(Drop here)"); }// function droptargetOnDrop(e) {// var eId = "#" + e.target.id;// // $(eId).text("You did great!");// // $(eId).removeClass("hollow");// //$("#droptTargetId").html("<div class="droptarget">(ABCS)</div>");// alert("DropID :" + eId + ":" + "DragID : " + droptTargetId);// //alert("Destination ID:" + e.sender.element.attr("id"));// if (eId == droptTargetId) {// alert("I got similar values");// return;// }// // alert("eLSE PART");// alert("Destination ID:" + e.sender.element.attr("id"));// $(eId).kendoDropTarget({// dragenter: droptargetOnDragEnter,// dragleave: droptargetOnDragLeave,// drop: droptargetOnDrop// });// $(e.target.id).addClass("droptarget");// $(e.target.id).removeClass("draggable");// $(droptTargetId).kendoDraggable({// hint: function (element) {// $("#droptarget").text("(EHm)");// return element.clone();// },// dragstart: draggableOnDragStart,// dragend: draggableOnDragEnd// });// $(e.target.id).addClass("draggable");// $(e.target.id).removeClass("droptarget");// } function draggableOnDragEnd(e) { kendoConsole.log("drag End"); //alert("draggableOnDragEnd"); var eId = "#" + e.target.id //alert(e.target.id); //var abs = $().attr("id");// alert(); $(e.target.id).addClass("hollow"); var draggable = $(eId);// if (draggable.data("kendoDraggable")) {// if (!draggable.data("kendoDraggable").dropped) {// // drag ended outside of any droptarget// $(e.target.id).text("Try again!");// }// } draggable.removeClass("hollow"); //alert("draggableOnDragEnd"); } $(".droptarget").kendoDropTarget({ dragenter: droptargetOnDragEnter, dragleave: droptargetOnDragLeave, drop: function DropOnTarget(e) { kendoConsole.log("drop : " + DropReceiverID); // var eId = "#" + e.target.id; // alert("dropped"); // alert("SenderID :" + eId + ":" + "ReceiverID: " + e.sender.element.attr("id")); // // var target = dataSource.get($(e.draggable.currentTarget).data("id")), // // dest = $(e.target); // // alert("Target: " + dest); // // alert(element); // // $(e.target).text("You did great!"); // alert(e.target); //$(e.sender.element.attr("id")).html("<div class="droptarget">(Try Again)"); // if (!draggable.data("kendoDraggable").dropped) { // // drag ended outside of any droptarget // alert("Destination ID :" + e.sender.element.attr("id")); // // } //alert(n); //++n; //alert(n); DropReceiverID = e.sender.element.attr("id"); // alert("SenderID : " + DragSenderID); // alert("ReceiverID : " + DropReceiverID); $(e.target).text(GadgetName); // $(SenderID).kendoDropTarget({ // dragenter: droptargetOnDragEnter, // dragleave: droptargetOnDragLeave // // drop: droptargetOnDrop // }); // $(SenderID).addClass("droptarget"); // $(SenderID).removeClass("draggable"); // $("#droptarget").html("<div class="test1">(Drop here)</div><div class="test2">(Drop $(e.target).kendoDraggable({ hint: function (element) { return element.clone(); // kendoConsole.log("drassop"); }, dragstart: draggableOnDragStart, dragend: draggableOnDragEnd }); $(e.target).addClass("draggable"); $(e.target).removeClass("droptarget");// var $target = $(e.target);// changeStyle(e.draggable.hint, "normal", "allowed");// $(e.draggable.hint).clone().appendTo($target)[0].style.cssText = "";// $target.append(" ");// //alert(e.target); //$(e.target).html("<div class="dragCounter"></div>"); // alert(DragSenderID); // $(e.target.id).text("Drop Here"); // //$(DragSenderID).switchClass(""); // $(DragSenderID).addClass("droptarget"); } //droptargetOnDrop }); $(".draggable").kendoDraggable({ hint: hint, dragstart: draggableOnDragStart, drag: draggableOnDrag, dragcancel: draggableOnCancel, dragend: draggableOnDragEnd }); function hint(element) { return element.clone(); }[edit]code block added[/edit] 解决方案 (hiddenFieldId).val(); kendoConsole.log("dragstart : " + DragSenderID + ":" + GadgetName);// var eId = "#" + e.target.id//(eId).width((eId).width() + "px");// 这篇关于如何创建KENDO Draggable DIV？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！