How to handle data from different html lists?

Tue, 23 Mar 2010 01:38:21 -0700

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,opt ions||{});
return $(this).each(function(i){
var $list = $(this);
var list_id = $.fn.drag_drop_selectable.unique++;
$.fn.drag_drop_selectable.stack[list_id]={"selecte d":[ ],"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_se lectable.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'))].selectC lass );

}).bind('dds.deselect',function(){
$(this).removeClass('dds_selected').removeClass( $.fn.drag_drop_selectable.settings[$.fn.drag_drop_ selectable.getListId($(this).attr('dds'))].selectC lass );;
}).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[list].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_dr op_selectable.settings[list].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].onList Change( $('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].onList Change( $('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=functio n(item_id, old_list_id, new_list_id){
//first deselect.
$.fn.drag_drop_selectable.deselect(parseInt(item_i d));
//now remove from stack
$.fn.drag_drop_selectable.stack[old_list_id].all.s plice( $.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.p ush( parseInt(item_id) );
//now move DOM Object.
$('ul[dds='+old_list_id+']').find('li[dds='+item_i d+']').removeClass($.fn.drag_drop_selectable.setti ngs[old_list_id].ghostClass).appendTo( $('ul[dds='+new_list_id+']') );
};
$.fn.drag_drop_selectable.getSelectedForDragging=f unction(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:'hidd en'});
$(this).filter('.dds_selected').addClass( $.fn.drag_drop_selectable.settings[list].moveClass ).css({opacity:$.fn.drag_drop_selectable.settings[ list].moveOpacity});;
$(this).attr('dds_drag',$(this).attr('dds'))
$(this).attr('dds','');
});
return $others;
};
$.fn.drag_drop_selectable.getMarginForDragging=fun ction($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[list].selected.pus h(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[list].selected.spl ice($.inArray(id,$.fn.drag_drop_selectable.stack[l ist].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[list].selected.pus h(id);
$('[dds='+id+']').trigger('dds.select');
};
$.fn.drag_drop_selectable.selectNone=function(list _id){
$.fn.drag_drop_selectable.getListItems(list_id).ea ch(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).ea ch(function(){
$.fn.drag_drop_selectable.select( $(this).attr('dds') );
});return false;
};
$.fn.drag_drop_selectable.selectInvert=function(li st_id){
$.fn.drag_drop_selectable.getListItems(list_id).ea ch(function(){
$.fn.drag_drop_selectable.toggle( $(this).attr('dds') );
});return false;
};
$.fn.drag_drop_selectable.getListItems=function(li st_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).ea ch(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).att r('dds')); },
selectInvert:function(id){ return $.fn.drag_drop_selectable.selectInvert($('#'+id).a ttr('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>

Re: How to handle data from different html lists?

Tue, 23 Mar 2010 15:16:27 -0700

What a bunch of code you posted there... :-P

Most is Javascript though...
It's not really clear what you want, but I guess you want to be able to know from witch ul list your data came...?

like:

<input name="person1_name" />
<input name="person1_address" />
<input name="person1_age" />

<input name="person2_name" />
<input name="person2_address" />
<input name="person2_age" />

in your php you would then want to save the data from person1 and person2 seperately. is this what you mean?

you could simply do it by naming your varialble a certain way so you can split the data easily, like I did in the above example. I can now do the following:

foreach($_POST as $field=>$value) {
  list($person,$variable) = explode("_", $field);

  switch($person) {
    case "person1":
      $person1[$variable] = $value;
      break;
    case "person2":
      $person1[$variable] = $value;
      break;
    default:
      echo "this is not personal info...".$person."<br />";
  }
}

// now save your person1 and person2... their data is in seperate arrays now...

I hope this was helpfull, if not you'd better rephrase your question...

-mac-
mailto:mac_doggie@hotmail.com
the Netherlands...

Re: How to handle data from different html lists?

Wed, 24 Mar 2010 01:37:20 -0700

Hi again and many thanks for the reply.

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 :)

Re: How to handle data from different html lists?

Wed, 24 Mar 2010 01:39:43 -0700

'How to handle data from different html lists?' Thread RSS Feed

How to handle data from different html lists?

Re: How to handle data from different html lists?

Re: How to handle data from different html lists?

Re: How to handle data from different html lists?