jquery ui连接2个表，一个可排序，一个只可拖动（作为源）

时间：2014-02-13 02:28:53

标签： jquery jquery-ui jquery-ui-sortable jquery-ui-draggable jquery-ui-droppable

我有2张桌子， 左边的一个是空的，应该可以排序， 正确的一个作为来源，不应该是可排序的，我希望这些条目总是按字母数字排序。

该函数现在应该是：将项目从源表移动到空表中（然后它们从源表中消失），并在“空”表中对它们进行排序。

如果您不再需要它们，则将项目移回源表中，因此它们会再次出现在源表中，但源表始终按字母数字排序。

到目前为止，我最好的尝试是使用connectWith选项，因为我可以在两个表之间移动项目，但是如何防止源表可以排序？

修改
我可以接近我需要的东西，但是有一个问题我找不到解决方案。

到目前为止，我可以对列表1进行排序， 我可以将可拖动的项目从list2移动到list1并对它们进行排序，它们会在列表2中消失， 我可以将list1中的项目移到list2上并删除它们，它们会从list1中删除。

但是如果我将list2中的draggable-item悬停在list1上并让它回退到list2（可能是错误的项目或其他），然后在list1中移动sortable-item（甚至到同一个地方），然后这将从list2中删除该draggable-item，尽管可排序list1没有“收到”。

那我怎么能阻止这个呢？只有掉入可排序列表1的项目才能从可拖动列表2中删除。

http://jsbin.com/yafakuje/14/edit

HTML：

<h2>#sortable</h2>
<ul id="sortable">
  <li id="no_1" class="ui-state-default da">Item 1</li>
  <li id="no_2" class="ui-state-default da">Item 2</li>
  <li id="no_3" class="ui-state-default da">Item 3</li>
  <li id="no_4" class="ui-state-default da">Item 4</li>
  <li id="no_5" class="ui-state-default da">Item 5</li>
</ul>

<h2>#draggable</h2>
<ul id="draggable">
  <li id="no_6" class="ui-state-default dr">Item 6</li>
  <li id="no_7" class="ui-state-default dr">Item 7</li>
  <li id="no_8" class="ui-state-default dr">Item 8</li>
  <li id="no_9" class="ui-state-default dr">Item 9</li>
  <li id="no_10" class="ui-state-default dr">Item 10</li>
</ul>

JS 

$( "#sortable" ).sortable({
  receive: function( event, ui ) {
    $(ui.item).remove();
    },
  over: function( event, ui ) {
    $(ui.helper).css('cursor',"move");
    },
  stop: function( event, ui ) {
    $(ui.item).css('cursor','auto');
    },
  out: function( event, ui ){
    $(ui.helper).css('cursor','no-drop');
    },
  update: function () {
    var order = $('#sortable').sortable('serialize');
    //order later on send to the server via jquery-ajax $post
    alert(order);
  } 
}).disableSelection();


$( ".dr" ).draggable({
  connectToSortable: "#sortable",
  helper: "clone",
  start: function( event, ui ){
    $(ui.helper).css('cursor','no-drop');  
  }
}).disableSelection();


$( "#draggable" ).droppable({ 
  accept: ".da",
  drop: function(event,ui) {
    $(ui.draggable).remove();
    },
  over: function( event, ui ) {
    $(ui.helper).css('cursor',"alias");
    },
  out: function( event, ui ){
    $(ui.helper).css('cursor','no-drop');  
    }
});

EDIT2：

对于那些喜欢有一些工作代码而不是硬可读语法的业余爱好者来说，这里是我的一些代码。这是一种解决方案，可能还有其他更好的方法，但它对我有用。

代码调用弹出窗口，弹出窗口中是可排序和可拖动的列表。每次移动或拖动某些内容时我都会刷新完全弹出，因此所有弹出代码都在我的ajax.php中，并且它会递归调用自身。 从表字段调用弹出窗口，确保有多行，每行都有自己的id，可以将正确的数据调用到弹出窗口中。

php / html包含表格和弹出模板

<table>
<tbody>
    <tr dataID="'.$row['id'].'">
        <td></td>
        <td class="call_popup"> some data </td>';
    </tr>
</tbody>
</table>

<div id="popup">
    <div class="background"></div>
    <div class="popup">
    </div>
</div>

JS（调用弹出窗口）

jQuery(function($) {

    $(document).ajaxError(function(event, jqxhr, settings, exception){
        alert("An error occurred! Unable to get/set data!\nError: "+exception);
    });

    $(".call_popup").click(function() {
        var ID = $(this).parent("tr").attr('dataID');
        $.post("ajax.php",{action:'getpopup',id:ID},
            function(popup_content){
                $("#popup").children("div.popup").html(popup_content);

                $("#content").css("overflow","hidden");
                $("#popup").children(".popup").fadeIn(700);
                $("#popup").children(".background").css("opacity", "0.7");
                $("#popup").children(".background").fadeIn(700);
            }
        );
    });

    $(".background").click(function() {
            $(this).fadeOut(600);
            $(".popup").fadeOut(600);
            $("#content").css("overflow","auto");
    });

});

ajax.php从/向服务器获取/设置数据并创建带有可排序/可拖动列表的弹出窗口

<?php

session_start();
if (isset($_SESSION['user']) && $_SESSION['user']=='admin')
{
    require_once("sql_database.php");

    $action =  $_POST['action'];
    $data   = @$_POST['data'];
    $id     =  $_POST['id'];

    if ($action=='setsomething') {
        //some code
    } elseif ($action=='setothersomething') {
        //some code
    } elseif ($action=='setpopup') {
            parse_str($data,$part_data);

            mysql_query("DELETE FROM table WHERE id = '$id'") or die(header('HTTP/1.1 503'));

            $i=0;
            if (!empty($part_data)) {
                foreach($part_data['no'] as $part_data_id ) {
                    $i++;
                    mysql_query("INSERT INTO table SET
                                id = '".mysql_real_escape_string($id)."',
                                sequence = '$i',
                                data_id = '".mysql_real_escape_string($part_data_id)."'
                                ") or die(header('HTTP/1.1 503'));
                }
            }
    } elseif ($action=='getsomething') {
        //some code
    } elseif ($action=='getothersomething') {
        //some code
    } elseif ($action=='getpopup') {
            $result_sortable = mysql_query("SELECT data_id,data_name FROM table
                                    WHERE id = $id
                                    ORDER BY sequence ") or die(header('HTTP/1.1 503'));
            $result_draggable = mysql_query("SELECT data_id,data_name FROM table
                                    ") or die(header('HTTP/1.1 503'));

            header('HTTP/1.1 200 server');
            echo '
            <div id="left">
                <ol id="sortable">';
                    while ($data = mysql_fetch_assoc($result_sortable)) {
                        echo '
                        <li pos="no_'.$data['data_id'].'" class="da">'.$data['data_name'].'</li>
                        ';
                    }
            echo '
                </ol>
            </div>
            <div id="right">
                <ul id="draggable">';
                while ($data = mysql_fetch_assoc($result_draggable)) {
                    echo '
                        <li pos="no_'.$data['data_id'].'" class="dr">'.$data['data_name'].'</li>
                        ';
                }
                echo  '</ul>
            </div>';

            echo '
            <script>
                $("#sortable").sortable({
                    receive: function(event,ui) {
                        //$(ui.item).remove();
                        },
                    over: function(event,ui) {
                        $(ui.helper).css("cursor","move");
                        },
                    stop: function(event,ui) {
                        $(ui.item).css("cursor","auto");
                        },
                    out: function(event,ui) {
                        $(ui.helper).css("cursor","no-drop");
                        },
                    update: function() {
                        var order = $("#sortable").sortable("serialize",{attribute:"pos"});
                        var scrollPosition = $("#right").scrollTop();
                        $.post("ajax.php",{action:"setpopup",data:order,id:'.$id.'},
                            function() {
                                $.post("ajax.php",{action:"getpopup",id:'.$id.'},
                                    function(popup_content){
                                        $("#popup").children("div.popup").html(popup_content);
                                        $("#right").scrollTop(scrollPosition);
                                    }
                                );
                            }
                        );
                        }
                }).disableSelection();

                $(".dr").draggable({
                        connectToSortable: "#sortable",
                        helper: "clone",
                    start: function(event,ui){
                        $(ui.helper).css("cursor","no-drop");  
                        }
                }).disableSelection();

                $("#draggable").droppable({ 
                        accept: ".da",
                    drop: function(event,ui) {
                        $(ui.draggable).remove();
                        },
                    over: function(event,ui) {
                        $(ui.helper).css("cursor","alias");
                        },
                    out: function(event,ui) {
                        $(ui.helper).css("cursor","no-drop");  
                        }
                });

            </script>';
            die;
    }

    header('HTTP/1.1 200 server');
    header('Content-Type: application/json');
    $array = array('success' => true);
    echo json_encode($array);


} else {
    header('HTTP/1.1 401');//Unauthorized
}


?>

0 个答案:

没有答案
相关问题
最新问题