如何将可拖动的Datalist项目发布到我的服务器中 [英] How Do I Post Draggable Datalist Item Into My Server

问题描述

大家好。我在这里帮忙（非常好）！

所以我有一个拖放datalist

Hello guys. I help some help here(badly)!
So i have a drag and drop datalist

项，它可以放入另一个div并以文本显示。

所以这是我的问题如何将这个文本发送到我的数据库（我在这里使用休息服务）



感谢提前！ !!!!



我的HTML代码:(客户端）

item, and it can be drop into another div and display in text.
So here's my question how do i send this text into my database(i'm using rest service here)

THANKS IN ADVANCE!!!!!

My html code : (client)

asp:DataList ID="DataList1" runat="server" DataKeyField="FoodID" RepeatDirection="Horizontal" RepeatColumns="3" >
    <ItemTemplate>
         <div id="div1" class="block">

        <asp:Label ID="FoodIDLabel" runat="server" Text='<%# Eval("FoodID") %>' Visible="False" />
        <br />
        <asp:Label ID="FoodNameLabel" runat="server" Text='<%# Eval("FoodName") %>' />
        <br />
        Calories:
        <asp:Label ID="CaloriesLabel" runat="server" Text='<%# Eval("Calories") %>' />
        <br />
        image:
        <asp:Image ID="Image1" runat="server" />
        <br />
<br /></div>
    </ItemTemplate>
    </asp:DataList>

     <div id="div2" class="drop">Drag Food To Here<br />
         <br />
         </div>

<script language="javascript" type="text/javascript">


        window.Error = function (msg) {
            alert(msg);
        }


JavaScript :
        $(document).ready(function () {

            $(".block").draggable({ helper: 'clone' });


            $(".drop").droppable({
                accept: ".block",
                activeClass: 'droppable-active',
                hoverClass: 'droppable-hover',
                drop: function (ev, ui) {
                    $("<div></div>").text(ui.draggable.text()).appendTo(this);
                    this.value = $(ui.draggable).text();

                }
            });
        });

最后我的休息服务for create：（。cs）

Lastly my rest service for create : (.cs)

[OperationContract]
       [WebGet(BodyStyle = WebMessageBodyStyle.Bare,
           RequestFormat = WebMessageFormat.Json,
           ResponseFormat = WebMessageFormat.Json,
           UriTemplate = "InsertPlan?PlanDate={Date}&Category={Category}&FoodName={food}&TCalories={calories}")]
       string InsertPlan(string Date, string Category, string food, string calories);

推荐答案

（document）.ready（function （）{

(document).ready(function () {

（ .block）。draggable （{帮助：' clone'}）;

(".block").draggable({ helper: 'clone' });

（ 。drop）。droppable（{
accept： .block，
activeClass：' droppable-active'，
hoverClass：' droppable-hover'，
drop：function（ev，ui）{

(".drop").droppable({ accept: ".block", activeClass: 'droppable-active', hoverClass: 'droppable-hover', drop: function (ev, ui) {

这篇关于如何将可拖动的Datalist项目发布到我的服务器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！