0

这将是我第一次使用拖放功能。我必须为一所大学申请时间表，这需要从左侧的教师职责列表中拖动包含所有必需值并放入右侧的时间表槽中，然后弹出一个对话框询问房间号和然后在 php 和 mysql 级别执行各种检查，最后插入数据库。另外，不用说这必须是一个ajax解决方案。

我真的希望这是一个纯 javascript 解决方案，而不是像 jquery、原型等一些框架，因为我要与时间赛跑，而且我以前从未使用过任何框架，所以我现在不能抽出时间来学习其中的一个。但是，如果你们不能用纯 javascript 帮助我，我将不得不使用上述框架之一。

请尽快提供帮助。另外，请询问您是否需要更多说明我想要实现的目标。

4

1 回答 1

1

第一个选项是：在核心 javascript 中，您可以使用 HTML5 拖放功能，但它在 safari 浏览器中特别有问题。

第二个选项是：http: //jqueryui.com/sortable/#connect-lists

把下面的代码我会告诉你如何调用ajax。我仍然在这里为您提供帮助，直到您获得预期的输出

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Sortable - Connect lists</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

    <style>
    #left, #right { border:1px solid #000000;min-height:100px;min-width:100px;list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
    #left li, #right li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
    </style>
    <script>
    $(function() {
        $( "#left, #right" ).sortable({
            connectWith: ".connectedSortable",
            receive: function(event,ui){
                 console.log("old ui id = "+ui.sender.attr("id")+" new ul id = "+this.id+" li id "+$(ui.item).attr("id"));                   
                 if(ui.sender.attr("id") != this.id)
                 {  
                    //Your ajax call will come here


                            $.ajax({
                    type: "POST",
                    url: "logic.php", 
         // Write you //php mysql logic here you'll get all your data in logic.php file 
                  data: { left: ui.sender.attr("id"), right: this.id , responsibility:$(ui.item).attr("id") }
                }).done(function( msg ) {
                              alert( "Data Saved: " + msg );
                            });
                 }
             }

        }).disableSelection();
    });
    </script>
</head>
<body>

<ul id="left" class="connectedSortable">
    <li id="1" class="ui-state-default">Item 1</li>
    <li id="2"  class="ui-state-default">Item 2</li>
    <li id="3"  class="ui-state-default">Item 3</li>
    <li id="4"  class="ui-state-default">Item 4</li>
    <li id="5"  class="ui-state-default">Item 5</li>
</ul>

<ul id="right" class="connectedSortable">
    <li id="6" class="ui-state-highlight">Item 1</li>
    <li id="7"  class="ui-state-highlight">Item 2</li>
    <li id="8"  class="ui-state-highlight">Item 3</li>
    <li id="9"  class="ui-state-highlight">Item 4</li>
    <li id="10"  class="ui-state-highlight">Item 5</li>
</ul>


</body>
</html>
于 2012-12-08T16:48:54.503 回答