Jag börjar direkt med att säga att jag är nybörjare.
Jag har hittat ett scrip på internet som jag försöker använda för att skapa en sida som låter folk flytta runt innehållet lite. Detta fungerar rätt bra med nedanstående kod, men jag skulle behöva spara positionerna i en databas.
Hur plockar jag ut position så jag kan lägga in i databas?
Finns ju en OnClientDrop="onDrop" som funkar fint till att få ut position i javascript så som jag gör här nedanför, men att få ut det i asp koden som en event handler eller något lyckas jag inte med =/
Alla tips och förslag väldigt välkomna!
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Assembly="CustomDragDrop" Namespace="CustomDragDrop" TagPrefix="cdd" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>ASP.NET AJAX Extender for multicolumn drag & drop</title>
<style type="text/css">
.rightcol { width: 30%; float: left; padding: 0.5em; border: 1px solid black; margin: 0.5em; }
.leftcol { width: 30%; float: left; padding: 0.5em; border: 1px solid black; margin: 0.5em; }
.widget_header { width: 100%; padding-top: 0.1em; padding-bottom: 0.1em; margin: 0em; font-size: 100%; font-weight: normal; cursor: move; background-color: #f0f0f0; }
.widget { position: relative; left: 0px; top: 0px; margin-bottom: 1em; background-color: white; }
.widget_dropcue { border: dashed 1px gray; display:none; margin-bottom: 1em; }
</style>
<script language="javascript" type="text/javascript">
function onDrop( sender, e )
{
var container = e.get_container();
var item = e.get_droppedItem();
var position = e.get_position();
var columnNo = parseInt(container.getAttribute("columnNo"));
alert( String.format( "Container: {0}, Item: {1}, Position: {2}, Column: {3}", container.id, item.id, position, columnNo ) );
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"
LoadScriptsBeforeUI="false" ScriptMode="Release" />
<div>
<asp:Button ID="dummy" runat="server" />
<cc1:ConfirmButtonExtender ID="ConfirmButtonExtender1" TargetControlID="dummy" runat="server" ConfirmText="Are you sure you want to do this?" />
<asp:Panel ID="_leftPanel" runat="server" columnNo="0" CssClass="leftcol">
<div class="widget" id="widget_1">
<div class="widget_header" id="widget_header_1" runat="server">
Widget Header 1
</div>
</div>
<div class="widget" id="widget_2">
<div class="widget_header" id="widget_header_2" runat="server">
Widget Header 2
</div>
</div>
<div id="drop_cue_left" class="widget_dropcue">
</div>
</asp:Panel>
<cdd:CustomDragDropExtender ID="_customDragDropExtenderLeft" runat="server" TargetControlID="_leftPanel"
DragItemClass="widget" DragItemHandleClass="widget_header" DropCueID="drop_cue_left"
OnClientDrop="onDrop" />
<asp:Panel ID="_rightPanel" runat="server" columnNo="2" CssClass="rightcol">
<div class="widget" id="widget_3">
<div class="widget_header" id="widget_header_3" runat="server">
Widget Header 3
</div>
</div>
<div class="widget" id="widget_4">
<div class="widget_header" id="widget_header_4" runat="server">
Widget Header 4
</div>
</div>
<div id="drop_cue_right" class="widget_dropcue">
</div>
</asp:Panel>
<cdd:CustomDragDropExtender ID="_customDragDropExtenderRight" runat="server" TargetControlID="_rightPanel"
DragItemClass="widget" DragItemHandleClass="widget_header" DropCueID="drop_cue_right"
OnClientDrop="onDrop" />
</div>
</form>
</body>
</html>
Här finns en referenslänk till det ursprungliga scriptet:
http://weblogs.asp.net/omarzabir/archive/2007/10/22/asp-net-ajax-extender-for-multi-column-widget-drag-amp-drop.aspx