<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.DragDropManager.Overview.DefaultCS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<head runat="server">
<title>Telerik ASP.NET Example</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<div class="demo-container size-narrow">
<telerik:RadDraggable runat="server" ID="RadDraggable1" TargetSelectors="#draggable">
<ClientEvents OnDragStart="draggableOnDragStart" OnDragEnd="draggableOnDragEnd" />
</telerik:RadDraggable>
<telerik:RadDropTarget runat="server" ID="RadDropTarget1">
<ClientEvents OnDragEnter="droptargetOnDragEnter" OnDragLeave="droptargetOnDragLeave" OnDrop="droptargetOnDrop" />
</telerik:RadDropTarget>
<div id="example">
<div class="demo-section k-content">
<asp:Panel ID="droptarget" runat="server" CssClass="k-header drop-target">Drag the small circle here.</asp:Panel>
<div id="draggable" class="draggable"></div>
</div>
</div>
</div>
<script>
function draggableOnDragStart(sender, args) {
var kendoDraggable = args.get_sender();
var target = args.get_target();
var draggableElemenets = $find("<%= RadDraggable1.ClientID %>").get_elements();
draggableElemenets.addClass("hollow");
var dropTargetElements = $find("<%= RadDropTarget1.ClientID %>").get_elements();
dropTargetElements.text("Drop here.");
dropTargetElements.removeClass("painted");
}
function droptargetOnDragEnter(sender, args) {
var kendoDraggable = args.get_draggable();
var dropTargetElement = args.get_dropTarget();
dropTargetElement.text("Now drop...");
dropTargetElement.addClass("painted");
}
function droptargetOnDragLeave(sender, args) {
var kendoDropTarget = args.get_sender();
var kendoDraggable = args.get_draggable();
var dropTargetElement = args.get_dropTarget();
var targetElement = args.get_target();
dropTargetElement.text("Drop here.");
dropTargetElement.removeClass("painted");
}
function droptargetOnDrop(sender, args) {
var kendoDraggable = args.get_draggable();
var kendoDropTarget = args.get_sender();
var dropTargetElement = args.get_dropTarget();
var targetElement = args.get_target();
dropTargetElement.text("You did great!");
kendoDraggable.element.removeClass("hollow");
}
function draggableOnDragEnd(sender, args) {
if (!sender.get_dropped()) {
// drag ended outside of any droptarget
var dropTargetElements = $find("<%= RadDropTarget1.ClientID %>").get_elements();
dropTargetElements.text("Try again!");
}
sender.get_elements().removeClass("hollow");
}
function onAxisSelectionChanged(sender, args) {
var draggable = $find("<%= RadDraggable1.ClientID %>");
draggable.set_axis(args.get_item().get_value());
}
function OnCursorOffsetChanged(sender, args) {
var draggable = $find("<%= RadDraggable1.ClientID %>");
var checked = $find("<%= CursorOffsetCheckbox.ClientID %>").get_checked();
var cursorOffsetTop = $find("<%= NumericCursorOffsetTop.ClientID %>").get_value();
var cursorOffsetLeft = $find("<%= NumericCursorOffsetLeft.ClientID %>").get_value();
if (checked) {
draggable.set_cursorOffset({ top: cursorOffsetTop, left: cursorOffsetLeft });
} else {
draggable.set_cursorOffset(null);
}
}
</script>
<asp:Panel ID="Panel1" runat="server">
<qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server">
<Views>
<qsf:View Title="Configuration">
<qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
<ul class="fb-group">
<li>
<qsf:ComboBox ID="rcbAxis" runat="server" Label="Axis" AutoPostBack="false" Size="Wide" OnClientSelectedIndexChanged="onAxisSelectionChanged">
<Items>
<telerik:RadComboBoxItem Value="0" Selected="true" Text="(none)"></telerik:RadComboBoxItem>
<telerik:RadComboBoxItem Value="1" Text="Horizontal (x)"></telerik:RadComboBoxItem>
<telerik:RadComboBoxItem Value="2" Text="Vertical (y)"></telerik:RadComboBoxItem>
</Items>
</qsf:ComboBox>
</li>
<li>
<span class="checkbox">
<telerik:RadCheckBox ID="CursorOffsetCheckbox" AutoPostBack="false" runat="server" Text="Enable CursorOffset" OnClientCheckedChanged="OnCursorOffsetChanged"></telerik:RadCheckBox>
</span>
</li>
<li>
<qsf:NumericTextBox ID="NumericCursorOffsetTop" runat="server" IncrementSettings-Step="5" NumberFormat-DecimalDigits="0" Label="CursorOffset - Top" Value="-80" Size="Wide">
<ClientEvents OnValueChanged="OnCursorOffsetChanged" />
</qsf:NumericTextBox>
</li>
<li>
<qsf:NumericTextBox ID="NumericCursorOffsetLeft" runat="server" IncrementSettings-Step="5" NumberFormat-DecimalDigits="0" Label="CursorOffset - Left" Value="20" Size="Wide">
<ClientEvents OnValueChanged="OnCursorOffsetChanged" />
</qsf:NumericTextBox>
</li>
</ul>
</qsf:ConfiguratorColumn>
</qsf:View>
</Views>
</qsf:ConfiguratorPanel>
</asp:Panel>
</form>
</body>
</html>