Question

行。我将尝试尽可能清楚，并提供我的源代码，以尝试帮助我提出的问题。

所以我有这些可拖动的元素，这些元素通过数据库拉出，从一个区域拖动到一个可放置/可排序的区域。它们应该在那里收集，以便以后可以提交它们的值（通过电子邮件发送给我和用户）。我正在试图弄清楚代码应该如何在表单中编写的方式，以便我确信在对可放置区域进行排序以发送到电子邮件之后它将被拾取。

这是我的参考代码（发送表单方面目前还没有实现占位符）： jsfiddle： http://jsfiddle.net/Matuduke/Y86As/

<style>

    .tooltip { position:fixed; top: 0;left: 0;z-index: 3; display: none;}

    #send {float:left; position:relative; }
    #column_en { float:inherit;}
    #webwall { float:left; width:48%; padding: 3px; max-height:340px; min-height:340px; }
    #collectborder { float:left; width:50%; min-height:340px; padding: 0px; }


    #staticwall li {cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important; list-style-type: none; margin: 6px 6px 6px 6px; padding: 1px; float: left; width: 84px; height: 144px; font-size:x-small; text-align: center; }

    #collection { list-style-type:none; min-height:340px; float:left; min-width:500px; border:dashed;background:#fff; height:30%; padding: .5% ; } * html #collecton { height: 0em; }
    #collection li { list-style-type:none; margin: 6px 6px 6px 6px; padding: 1px; float: left; width: 84px; height: 144px; font-size: 1em; text-align: center;}


    </style>
<script>
    $(function() {
        var removeIntent = false;
    $( "#collection").sortable({
     over: function () {
            removeIntent = false;
        },
        out: function () {
            removeIntent = true;
        },
        beforeStop: function (event, ui) {
            if(removeIntent == true){
                ui.item.remove();
                    }
                 }
        });
        $( "#collection").disableSelection();
            });

        $(document).ready(function() {
        var source;
        var destination;
        var fn = function(event, ui) {
            toDrop = $(ui.draggable).clone();
            if ($("#collection").find("li[uIdentity=" + toDrop.attr("uIdentity") + "]").length >= 0) {
                $("#collection").prepend(toDrop);
            }
            else
                return false;
        };
        $("#staticwall li, #collection li").draggable({
            helper: 'clone',
            hoverClass: "ui-state-default"
        });

        $("#collection").droppable({
            accept: "#staticwall li" ,
            drop: fn 
                    });
                });
            $("#staticwall li").setPos('0,0');
            $('#staticwall').tinyscrollbar();
        $(function() {

        $("#collection li").draggable({
            revert: true
                    });
                    });
        </script>
        </head>
        <body>       
        <div id="column_en">
        <div id="webwall">
           Choose the pieces to add to your collection:
    <ul style="overflow:auto;height:300px;animation-timing-function:ease-in-out;" id="staticwall" class="ui-state-default">

        <?php 
        mysql_connect('localhost','user,'pass');
        mysql_select_db("houstop9_Spiritiles");
        $result = mysql_query("SELECT thumb, title, quote, sku FROM spiritiles ORDER BY `spiritiles`.`sku` DESC LIMIT 0, 120");

        // print the list items
            while ($row = mysql_fetch_array($result)) {
            echo "<li uIdentity='1' class='ui-state-default'>{$row['thumb']}\n {$row['sku']}</li>";

                }
                ?>

        </ul>
            </div>


        <div>Create your Collection here: </div>
        <div  id="collectborder" >
        <ul id="collection" class="ui-state-default">
            </ul>
            <div id="send"><form>
            <input type="text" accept="">
            <input type="image" accept="">

                <input type='submit' name='submit' value='Send Tiles'></form> 
            </div> 

            </div>
            </div>

            </body>

修改好吧我想我得到你说的但我不确定我理解JQuery中的get方法。当我提交表单时，我一直在尝试让它运行，但我认为我正在捏造它：

     function getSku() 
        var myIds = new array();
        $("#collection li").each(function(index, element){
           getSelection(index + ': ' + $(this).text());
           myIds.push(element.id);

            });
         }
         $("form").submit(getSku);

Answer 1

使用jQuery，您可以使用虚拟框的.each()元素进行迭代，如下所示：

var myIds = new array();
$("#collection li").each(function(index, element){
  // get ids
  myIds.push(element.id);
});

然后你必须使用对象的id创建一个数组，然后提交它们。使用PHP，您可以通过电子邮件发送这些ID。

修改在PHP中，当您创建li元素时，您需要执行以下操作：

echo "<li uIdentity='1' class='ui-state-default' id='{$row['sku']}'>"; echo " {$row['thumb']}\n {$row['sku']}"; echo "</li>";

我认为sku是您表格的主键。如果没有，id属性应该反映您的主键

从数据库中提取并将表单发送到电子邮件的Jquery元素

1 个答案: