如何创建KENDO Draggable DIV？ [英] How to Create 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（< span class =code-string> 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（））;
// } ）;
// }
< span class =code-comment> // 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，
< span class =code-comment> // dragleave：droptargetOnDragLeave，
// drop：droptargetOnDrop
// }）;
// $（e.target.id）。 addClass（droptarget）;
// $（e.target.id）。 removeClass（draggable）;
// $ （droptTargetId）.kendoDraggable（{
// 提示：function（element）{
// $（＃droptarget）。text（（EHm））;
// < span class =code-comment> 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）{
< span class =code-comment> // //在任何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 here
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).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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
