How to handle data from different html lists?

Discussion in 'PHP' started by datalogi, Mar 23, 2010.

0
  1. #1
    Hi.
    I have the code where I can drag and drop items to the 5 different html lists.

    When I have dragged items to the lists I would like to save the result.
    So my problem is that when I save the result I don't know where from the lists data comes.

    Could you please help me if you understand what I mean?

    The code is following:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type='text/css'>
    body,html {
    color:#333;
    font-family:Calibri;
    font-size:11px;
    }
    .panel {float:left;width:200px;margin:20px;}

    ul {
    list-style-type:none;
    border:1px solid #999;
    background:#ccc;
    padding:20px;
    min-height:150px;
    width:100px;
    }

    li {
    display:block;
    border:1px solid #999;
    background:#fff;
    width:80px;
    padding:5px 10px;
    margin-bottom:5px;
    }

    .dds_selected {
    background:#ffc;
    }
    .dds_ghost {
    opacity:0.5;
    }
    .dds_move {
    background:#cfc;
    }
    .dds_hover {
    background:#fc9;
    border:3px dashed #c96;
    }

    .holder {
    border:3px dashed #333;
    background:#fff;
    }

    </style>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js'></script>
    <script type='text/javascript'>
    /**
    * Multi-Select And Drag
    *
    * Not elegant solution to this problem, but the problem, despite being easily
    * desribed is not simple. This code is more a proof of concept, but should be
    * extendable by anyone with the time / inclination, there I grant permission
    * for it to be re-used in accodance with the MIT license:
    *
    * Copyright (c) 2009 Chris Walker (http://thechriswalker.net/)
    *
    * Permission is hereby granted, free of charge, to any person obtaining a copy
    * of this software and associated documentation files (the "Software"), to deal
    * in the Software without restriction, including without limitation the rights
    * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    * copies of the Software, and to permit persons to whom the Software is
    * furnished to do so, subject to the following conditions:
    *
    * The above copyright notice and this permission notice shall be included in
    * all copies or substantial portions of the Software.
    *
    * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    * THE SOFTWARE.
    */
    (function($){
    $.fn.drag_drop_selectable = function( options ){
    $.fn.captureKeys();
    var $_this = this;
    var settings = $.extend({},$.fn.drag_drop_selectable.defaults,options||{});
    return $(this).each(function(i){
    var $list = $(this);
    var list_id = $.fn.drag_drop_selectable.unique++;
    $.fn.drag_drop_selectable.stack[list_id]={"selected":[ ],"all":[ ]};//we hold all as well as selected so we can invert and stuff...
    $list.attr('dds',list_id);
    $.fn.drag_drop_selectable.settings[list_id] = settings;
    $list.find('li')
    //make all list elements selectable with click and ctrl+click.
    .each(function(){
    var $item = $(this);
    //add item to list!
    var item_id = $.fn.drag_drop_selectable.unique++;
    $item.attr('dds',item_id);
    $.fn.drag_drop_selectable.stack[list_id].all.push(item_id);
    $(this).bind('click.dds_select',function(e){
    if($.fn.isPressed(CTRL_KEY) || ($.fn.drag_drop_selectable.stack[$.fn.drag_drop_selectable.getListId( $(this).attr('dds') )].selected.length == 1 && $(this).hasClass('dds_selected'))){
    //ctrl pressed add to selection
    $.fn.drag_drop_selectable.toggle(item_id);
    }else{
    //ctrl not pressed make new selection
    $.fn.drag_drop_selectable.replace(item_id);
    }
    }).bind('dds.select',function(){
    $(this).addClass('dds_selected').addClass( $.fn.drag_drop_selectable.settings[$.fn.drag_drop_selectable.getListId($(this).attr('dds'))].selectClass );

    }).bind('dds.deselect',function(){
    $(this).removeClass('dds_selected').removeClass( $.fn.drag_drop_selectable.settings[$.fn.drag_drop_selectable.getListId($(this).attr('dds'))].selectClass );;
    }).css({cursor:'pointer'});
    })
    //OK so they are selectable. now I need to make them draggable, in such a way that they pick up their friends when dragged. hmmm how do I do that?
    .draggable({
    helper:function(){
    $clicked = $(this);
    if( ! $clicked.hasClass('dds_selected') ){
    //trigger the click function.
    $clicked.trigger('click.dds_select');
    }
    var list = $.fn.drag_drop_selectable.getListId($clicked.attr('dds'));
    var $helper = $('<div dds_list="'+list+'"><div style="margin-top:-'+$.fn.drag_drop_selectable.getMarginForDragging( $clicked )+'px;" /></div>').append( $.fn.drag_drop_selectable.getSelectedForDragging( $clicked.attr('dds') ) );
    $.fn.drag_drop_selectable.getListItems( list ).filter('.dds_selected').addClass($.fn.drag_drop_selectable.settings
    • .ghostClass);
      return $helper;
      },
      distance:5, //give bit of leeway to allow selecting with click.
      revert:'invalid',
      cursor:'move',
      stop:function(e, ui){
      var list = $.fn.drag_drop_selectable.getListId($clicked.attr('dds'));
      $.fn.drag_drop_selectable.getListItems( list ).filter('.dds_selected').removeClass($.fn.drag_drop_selectable.settings
      • .ghostClass);
        }
        });
        $list.droppable({
        drop:function(e,ui){
        var oldlist = parseInt(ui.helper.attr('dds_list'));
        ui.helper.find('li.dds_selected').each(function(){
        var iid = parseInt( $(this).attr('dds_drag') );
        $.fn.drag_drop_selectable.moveBetweenLists( iid, oldlist, list_id );
        });

        //now call callbacks!
        if( $.fn.drag_drop_selectable.settings[oldlist] && typeof($.fn.drag_drop_selectable.settings[oldlist].onListChange) == 'function'){
        setTimeout(function(){ $.fn.drag_drop_selectable.settings[oldlist].onListChange( $('ul[dds='+oldlist+']') ); },50);
        }
        if( $.fn.drag_drop_selectable.settings[list_id] && typeof($.fn.drag_drop_selectable.settings[list_id].onListChange) == 'function'){
        setTimeout(function(){ $.fn.drag_drop_selectable.settings[list_id].onListChange( $('ul[dds='+list_id+']') ); },50);
        }


        },
        accept:function(d){
        if( $.fn.drag_drop_selectable.getListId( d.attr('dds') ) == $(this).attr('dds')){
        return false;
        }
        return true;
        },
        hoverClass:$.fn.drag_drop_selectable.settings[list_id].hoverClass,
        tolerance:'pointer'
        });
        });
        };
        $.fn.drag_drop_selectable.moveBetweenLists=function(item_id, old_list_id, new_list_id){
        //first deselect.
        $.fn.drag_drop_selectable.deselect(parseInt(item_id));
        //now remove from stack
        $.fn.drag_drop_selectable.stack[old_list_id].all.splice( $.inArray( parseInt(item_id),$.fn.drag_drop_selectable.stack[old_list_id].all ),1);
        //now add to new stack.
        $.fn.drag_drop_selectable.stack[new_list_id].all.push( parseInt(item_id) );
        //now move DOM Object.
        $('ul[dds='+old_list_id+']').find('li[dds='+item_id+']').removeClass($.fn.drag_drop_selectable.settings[old_list_id].ghostClass).appendTo( $('ul[dds='+new_list_id+']') );
        };
        $.fn.drag_drop_selectable.getSelectedForDragging=function(item_id){
        var list = $.fn.drag_drop_selectable.getListId( item_id );
        var $others = $.fn.drag_drop_selectable.getListItems( list ).clone().each(function(){
        $(this).not('.dds_selected').css({visibility:'hidden'});
        $(this).filter('.dds_selected').addClass( $.fn.drag_drop_selectable.settings
        • .moveClass ).css({opacity:$.fn.drag_drop_selectable.settings
          • .moveOpacity});;
            $(this).attr('dds_drag',$(this).attr('dds'))
            $(this).attr('dds','');
            });
            return $others;
            };
            $.fn.drag_drop_selectable.getMarginForDragging=function($item){
            //find this items offset and the first items offset.
            var this_offset = $item.position().top;
            var first_offset = $.fn.drag_drop_selectable.getListItems( $.fn.drag_drop_selectable.getListId( $item.attr('dds') ) ).eq(0).position().top;
            return this_offset-first_offset;
            }

            $.fn.drag_drop_selectable.toggle=function(id){
            if(!$.fn.drag_drop_selectable.isSelected(id)){
            $.fn.drag_drop_selectable.select(id);
            }else{
            $.fn.drag_drop_selectable.deselect(id);
            }
            };
            $.fn.drag_drop_selectable.select=function(id){
            if(!$.fn.drag_drop_selectable.isSelected(id)){
            var list = $.fn.drag_drop_selectable.getListId(id);
            $.fn.drag_drop_selectable.stack
            • .selected.push(id);
              $('[dds='+id+']').trigger('dds.select');
              }
              };
              $.fn.drag_drop_selectable.deselect=function(id){
              if($.fn.drag_drop_selectable.isSelected(id)){
              var list = $.fn.drag_drop_selectable.getListId(id);
              $.fn.drag_drop_selectable.stack
              • .selected.splice($.inArray(id,$.fn.drag_drop_selectable.stack
                • .selected),1);
                  $('[dds='+id+']').trigger('dds.deselect');
                  }
                  };
                  $.fn.drag_drop_selectable.isSelected=function(id){
                  return $('li[dds='+id+']').hasClass('dds_selected');
                  };
                  $.fn.drag_drop_selectable.replace=function(id){
                  //find the list this is in!
                  var list = $.fn.drag_drop_selectable.getListId(id);
                  $.fn.drag_drop_selectable.selectNone(list);
                  $.fn.drag_drop_selectable.stack
                  • .selected.push(id);
                    $('[dds='+id+']').trigger('dds.select');
                    };
                    $.fn.drag_drop_selectable.selectNone=function(list_id){
                    $.fn.drag_drop_selectable.getListItems(list_id).each(function(){
                    $.fn.drag_drop_selectable.deselect( $(this).attr('dds') );
                    });return false;
                    };
                    $.fn.drag_drop_selectable.selectAll=function(list_id){
                    $.fn.drag_drop_selectable.getListItems(list_id).each(function(){
                    $.fn.drag_drop_selectable.select( $(this).attr('dds') );
                    });return false;
                    };
                    $.fn.drag_drop_selectable.selectInvert=function(list_id){
                    $.fn.drag_drop_selectable.getListItems(list_id).each(function(){
                    $.fn.drag_drop_selectable.toggle( $(this).attr('dds') );
                    });return false;
                    };
                    $.fn.drag_drop_selectable.getListItems=function(list_id){
                    return $('ul[dds='+list_id+'] li');
                    };
                    $.fn.drag_drop_selectable.getListId=function(item_id){
                    return parseInt($('li[dds='+item_id+']').parent('ul').eq(0).attr('dds'));
                    };
                    $.fn.drag_drop_selectable.serializeArray=function( list_id ){
                    var out = [];
                    $.fn.drag_drop_selectable.getListItems(list_id).each(function(){
                    out.push($(this).attr('id'));
                    });
                    return out;
                    };
                    $.fn.drag_drop_selectable.serialize=function( list_id ){
                    return $.fn.drag_drop_selectable.serializeArray( list_id ).join(", ");
                    };

                    $.fn.drag_drop_selectable.unique=0;
                    $.fn.drag_drop_selectable.stack=[];
                    $.fn.drag_drop_selectable.defaults={
                    moveOpacity: 0.8, //opacity of moving items
                    ghostClass: 'dds_ghost', //class for "left-behind" item.
                    hoverClass: 'dds_hover', //class for acceptable drop targets on hover
                    moveClass: 'dds_move', //class to apply to items whilst moving them.
                    selectedClass: 'dds_selected', //this default will be aplied any way, but the overridden one too.
                    onListChange: function(list){ console.log( list.attr('id') );} //called once when the list changes
                    }
                    $.fn.drag_drop_selectable.settings=[];


                    $.extend({
                    dds:{
                    selectAll:function(id){ return $.fn.drag_drop_selectable.selectAll($('#'+id).attr('dds')); },
                    selectNone:function(id){ return $.fn.drag_drop_selectable.selectNone($('#'+id).attr('dds')); },
                    selectInvert:function(id){ return $.fn.drag_drop_selectable.selectInvert($('#'+id).attr('dds')); },
                    serialize:function(id){ return $.fn.drag_drop_selectable.serialize($('#'+id).attr('dds')); }
                    }
                    });

                    var CTRL_KEY = 17;
                    var ALT_KEY = 18;
                    var SHIFT_KEY = 16;
                    var META_KEY = 92;
                    $.fn.captureKeys=function(){
                    if($.fn.captureKeys.capturing){ return; }
                    $(document).keydown(function(e){
                    if(e.keyCode == CTRL_KEY ){ $.fn.captureKeys.stack.CTRL_KEY = true }
                    if(e.keyCode == SHIFT_KEY){ $.fn.captureKeys.stack.SHIFT_KEY = true }
                    if(e.keyCode == ALT_KEY ){ $.fn.captureKeys.stack.ALT_KEY = true }
                    if(e.keyCode == META_KEY ){ $.fn.captureKeys.stack.META_KEY = true }
                    }).keyup(function(e){
                    if(e.keyCode == CTRL_KEY ){ $.fn.captureKeys.stack.CTRL_KEY = false }
                    if(e.keyCode == SHIFT_KEY){ $.fn.captureKeys.stack.SHIFT_KEY = false }
                    if(e.keyCode == ALT_KEY ){ $.fn.captureKeys.stack.ALT_KEY = false }
                    if(e.keyCode == META_KEY ){ $.fn.captureKeys.stack.META_KEY = false }
                    });
                    };
                    $.fn.captureKeys.stack={ CTRL_KEY:false, SHIFT_KEY:false, ALT_KEY:false, META_KEY:false }
                    $.fn.captureKeys.capturing=false;
                    $.fn.isPressed=function(key){
                    switch(key){
                    case CTRL_KEY: return $.fn.captureKeys.stack.CTRL_KEY;
                    case ALT_KEY: return $.fn.captureKeys.stack.ALT_KEY;
                    case SHIFT_KEY: return $.fn.captureKeys.stack.SHIFT_KEY;
                    case META_KEY: return $.fn.captureKeys.stack.META_KEY;
                    default: return false;
                    }
                    }
                    })(jQuery);


                    $(function(){
                    mychange = function ( $list ){
                    $( '#'+$list.attr('id')+'_serialised').html( $.dds.serialize( $list.attr('id')) );
                    }
                    $('ul').drag_drop_selectable({
                    onListChange:mychange
                    });
                    $( '#list_1_serialised').html( $.dds.serialize( 'list_1' ) );
                    $( '#list_2_serialised').html( $.dds.serialize( 'list_2' ) );
                    });
                    </script>



                    </head>
                    <body>


                    <form method="post" name="form1" action="test3.php">
                    <div class='panel'>
                    <h2>Erittäin hyvin</h2>
                    <ul id="list_1">
                    </ul>
                    </div>


                    <div class='panel'>
                    <h2>Melko hyvin</h2>
                    <ul id="list_2">
                    </ul>
                    </div>

                    <div class='panel'>
                    <h2>En osaa sanoa</h2>
                    <ul id="list_3">
                    </ul>
                    </div>

                    <div class='panel'>
                    <h2>Melkoa huonosti</h2>
                    <ul id="list_4">
                    </ul>
                    </div>

                    <div class='panel'>
                    <h2>Erittäin huonosti</h2>
                    <ul id="list_5">
                    </ul>
                    </div>

                    <div id="submit" style="position: absolute; top: 428px; left: 521px; width: auto; height: auto;">
                    <input type="submit" name="tallenna_painike" value="Save" />
                    </div>
                    </form>

                    <div id="valintalaatikot" style="position: absolute; top: 474px; left: 524px;">
                    <div id="laatikko1" style="position: absolute; width: auto; height: auto; left: -16px;">

                    <ul id="aiheet">
                    <li id="aiheet_item_1">Investments
                    <input type="text" name="name1" value="Investoinnit" id="name1" size="30" style="display: none;" />
                    </li>
                    <li id="aiheet_item_2">Family
                    <input type="text" name="name2" value="Perhe" id="name2" size="30" style="display: none;" />
                    </li>
                    <li id="aiheet_item_3">Sport
                    <input type="text" name="name3" value="Urheilu" id="name3" size="30" style="display: none;" />
                    </li>
                    <li id="aiheet_item_4">Frends
                    <input type="text" name="name4" value="Ystävät" id="name4" size="30" style="display: none;" />
                    </li>
                    <li id="aiheet_item_5">Age
                    <input type="text" name="name5" value="Oma ikä" id="name5" size="30" style="display: none;" />
                    </li>
                    <li id="aiheet_item_6">Flexibility
                    <input type="text" name="name6" value="Osaaminen" id="name6" size="30" style="display: none;" />
                    </li>
                    </ul>
                    </div>
                    </div>
                    <?php
                    /*
                    foreach($_POST['lista_1[]'] as $v){
                    print $v; //or anything to do with $v here...
                    }
                    */
                    // handle data from the lists...
                    echo $_POST['name1'];
                    echo '<br />';
                    echo $_POST['name2'];
                    echo '<br />';
                    echo $_POST['name3'];
                    echo '<br />';
                    echo $_POST['name4'];
                    echo '<br />';
                    echo $_POST['name5'];
                    echo '<br />';
                    echo $_POST['name6'];

                    ?>
                    </body>
                    </html>
     
    datalogi, Mar 23, 2010 IP
  2. datalogi

    datalogi Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    The point is that I would like to know that where of the 5 ul lists each of the names (Investments, Family, Sport, Friends, Age, Skills) has been dragged.

    Like:

    list_1 contains: Investments, Sport
    list_2 contains: Family
    list_3 contains: Skills
    list_4 contains: -
    list_5 contains: Friends, Age

    Hope you will understand better :)
     
    datalogi, Mar 24, 2010 IP