hola,
Estoy haciendo un drag an drop, pero al escoger un columna del listado me jala todo el listado como una imagen lo que quiero es que al escoger uno solo me muestre una columna este es mi html
<style type="text/css" title="currentStyle">
@import "css/demo_page.css";
@import "css/demo_table.css";
</style>
<style type="text/css" media="screen">
body {
font: 12px/16px Verdana, Arial, Helvetica, sans-serif;
color: #002;
padding: 0;
margin: 20px;
}
code {
display: block;
background: #F9F9F9;
border: 1px dashed #ABC;
font: 12px/16px "Courier New", Courier, monospace;
padding: 10px;
margin: 0 0 30px 0;
white-space: pre;
float: left;
}
.str { color: #00A; }
.kwd { color: #808; }
.com { color: #777; }
.typ { color: #088; }
.lit { color: #800; }
.pun { color: #000; }
.pln { color: #002; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
p { margin: 0 0 5px 0; }
.box {
padding: 10px 20px;
background: #CCC;
border: 1px solid #AAA;
text-align: center;
font-size: 10px;
margin: 0 0 10px 0;
}
.drag {
cursor: move;
}
.drop .drag {
height: 10px;
width: 10px;
font-size: 8px;
line-height: 10px;
}
.drop {
height: 202px;
width: 202px;
float: left;
border: 1px solid #AAA;
background: #CCC;
margin: 10px;
padding: 10px;
overflow: auto;
}
.ghost {
height: 10px;
width: 10px;
position: absolute;
filter:alpha(opacity=1);
-moz-opacity: 0.1;
opacity: 0.001;
background-color: #CCF;
border-color: #AAD;
color: #AAD;
font-size: 1px;
border:none;
background-image:url(images/forward_disabled.jpg)
}
.outline {
background-color: #FCC;
border-color: #DAA;
border-style: dashed;
color: #DAA;
}
.active {
background-color: #CFC;
border-color: #ADA;
}
#nodrop {
height: 120px;
}
#log {
border: 1px solid #AAA;
padding: 10px;
overflow: auto;
height: 160px;
width: 464px;
}
</style>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script src="js/jquery.event.drag-1.3.js" type="text/javascript"></script>
<script src="js/jquery.event.drop-1.2.js" type="text/javascript"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
$(function(){
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
$(".drag")
.bind( "dragstart", function( event ){
// ref the "dragged" element, make a copy
var $drag = $( this ), $proxy = $drag.clone();
//var $drag = $( this ), $proxy = $(document.imgdrag);
// modify the "dragged" source element
//$drag.addClass("outline");
// insert and return the "proxy" element
return $proxy.appendTo( docuement.body ).addClass("ghost");
})
.bind( "drag", function( event ){
// update the "proxy" element position
$( event.dragProxy ).css({
left: event.offsetX,
top: event.offsetY
});
})
.bind( "dragend", function( event ){
// remove the "proxy" element
$( event.dragProxy ).fadeOut( "normal", function(){
$( this ).remove();
});
// if there is no drop AND the target was previously dropped
if ( !event.dropTarget && $(this).parent().is(".drop") ){
// output details of the action
$('#log').append('<div>Removed <b>'+ this.title +'</b> from <b>'+ this.parentNode.title +'</b></div>');
// put it in it's original <div>
$('#nodrop').append( this );
}
// restore to a normal state
$( this ).removeClass("outline");
});
$('.drop')
.bind( "dropstart", function( event ){
// don't drop in itself
if ( this == event.dragTarget.parentNode ) return false;
// activate the "drop" target element
$( this ).addClass("active");
})
.bind( "drop", function( event ){
// if there was a drop, move some data...
//IDL$( this ).append( event.dragTarget );
// output details of the action...
fnSeleccionados();
$('#log').append('<div>Dropped <b>'+ event.dragTarget.title +'</b> into <b>'+ this.title +'</b></div>');
})
.bind( "dropend", function( event ){
// deactivate the "drop" target element
$( this ).removeClass("active");
});
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
});
</script>
</head>
<body id="dt_example">
<div id="log">
</div>
<br clear="all" />
-- output log --
<div class="drop" title="Target A">
<b>A</b>
</div>
<div class="drop" title="Target B">
<b>B</b>
</div>
<br clear="all" />
<div id="nodrop">
<div id="container">
<div id="demo" class="drag" title="Tabla">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</body>
</html>Ojala puedan ayudarme gracias