保存拖放列表的结果答案

【问题标题】：Saving the results of a drag and drop list保存拖放列表的结果
【发布时间】：2013-08-13 17:23:19
【问题描述】：

好的，完全披露。我在这里是全新的。这是我的第一个问题。我的编码能力很弱，但我正在学习。

我参加了一个慈善项目。我们有一个非常标准的 HTML 表单要完成，但它有一个语言部分，我们希望人们重新排序语言 - 拖放 - 以表明他们的流利程度。

然后我需要将所有字段（姓名、电子邮件地址、语言首选项）通过电子邮件发送给我。

我可以创建表单；我可以创建拖放，但我不知道如何传递重新排序列表的内容。

<body>
<header>
<h1>Preferences Form</h1>
</header>
<BR><BR>
<center>
   <form method="post" action="process.php">>
   <label>Your Name:</label>
   <input name="name" placeholder="Goes Here">
   <label>Your Email:</label>
   <input name="email" type="email" placeholder="Goes Here">

</center>
<section>
<h2>Language Fluency - Reorder Please</h2>
    <ul id="Language" class="handles list">
        <li><span>:: </span>English</li>
        <li><span>:: </span>French</li>
        <li><span>:: </span>German</li>
        <li><span>:: </span>Spanish</li>
    </ul>
</section>
<section>
    <h2>Volunteer Country</h2>
    <ul id="Country" class="handles list">
        <li><span>:: </span>Peru</li>
        <li><span>:: </span>Eritrea</li>
        <li><span>:: </span>Equatorial Guinea</li>
        <li><span>:: </span>Haiti</li>
    </ul>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.sortable.js"></script>
<script>
$(function() {
$('.sortable').sortable();
$('.handles').sortable({
    handle: 'span'
        });
        $('.connected').sortable({
            connectWith: '.connected'
        });
        $('.exclude').sortable({
            items: ':not(.disabled)'
        });
    });
</script>
<input id="submit" name="submit" type="submit" value="Submit">
</form>
</body>
</html>

提交成功后我使用的 process.php 非常简单。

<?php
// Get Data 
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);

// Here I cannot work out the field/vars for the UIs if it's even possible

// Send Message
mail( "email@email.com", "Preferences List",
"Name: $name\nEmail: $email\n",
"From: Volunteer <do-not-reply@fakeemail.com>" );

echo "Sent, thanks!"

?>

所以要清楚并重复：如何将两个重新排序的列表的内容传递到电子邮件？如果可能的话，我想避免使用 mysql 或 dbase 解决方案，因为这将是另一个需要学习的代码，但如果必须的话，我会这样做。

提前感谢您的帮助。

【问题讨论】：

使用<select size="1" name="language[]"><option>option_1</option><option>option_2</option><option>option_3</option></select> 影响您的language 选项，然后在您的处理器中使用$language = strip_tags($_POST['language']); 等等。
Fred，我认为这可能是 sortable() 正在做的事情，但很难说。乔纳森，把 print_r($_POST) 放在你的 proccess.php 上，看看它是否真的被提交了。
Fred，谢谢，但这会创建一个下拉列表，而不是拖放？它只允许一个选择，而我想捕捉这四种语言的顺序。
嗯，好的。我认为这就是所需要的。我当时误解了这个问题。
Connor - 没有来自 UI 的数据。这就是我的挑战。我只看到姓名/电子邮件

标签： php jquery html drag-and-drop jquery-ui-sortable

【解决方案1】：

您需要使用 javascript 将列表结果存储到隐藏字段中。将其绑定到提交按钮。

例如：您有两个列表：#columns 和 #selected_columns。

HTML：

<input id='saved_columns' type='hidden' name='TableColumns' />

<ul class='sortable' id='columns'>
    <li data-itemid='FirstName'>First Name</li>
    <li data-itemid='LastName'>Last Name</li>
    <li data-itemid='DayPhone'>Day Phone</li>
    <li data-itemid='Email'>Email</li>
</ul>

<ul class='sortable' id='selected_columns'>
</ul>

并为您的 javascript 使用类似的内容：（我正在使用 jQuery List DragSort http://dragsort.codeplex.com/）

$("#columns,#selected_columns").dragsort({
    dragSelector: "li", 
    dragBetween: true, 
    dragEnd: saveOrder, 
    placeHolderTemplate: "<li class='placeHolder'></li>"
});

function saveOrder() {
    var data = $("#selected_columns li").map(function() { 
        return $(this).data("itemid");
    }).get();
    $('#saved_columns').val(data);
}

如您所见，每次拖放元素时，DragSort 都会使用回调 (saveOrder)。 saveOrder 从下拉列表中的每个项目中获取itemid，并将它们存储到隐藏字段#saved_columns。

【讨论】：