PDA

View Full Version : Please Check The code Regarding Grid drag drop



sreenija
4 Sep 2007, 1:35 AM
Hi all!
This is nija
I am new to YUI/Ext
I am trying to create a grid capable of dragging and dropping its rows and itself as target
here is the code:

<html>
<head>
<title>YUI Library Examples: Drag &amp; Drop: Using Drag and Drop to Reorder a List</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="yahoo-min.js"></script>
<script type="text/javascript" src="yahoo-dom-event.js"></script>
<script type="text/javascript" src="dragdrop.js"></script>
<script type="text/javascript" src="yui-ext.js"></script>
<script type="text/javascript" src="dom-min.js"></script>
<script type="text/javascript" src="event-min.js"></script>
<script type="text/javascript" src="animation-min.js"></script>
<script type="text/javascript" src="dragdrop-min.js"></script>
<script type="text/javascript" src="container-min.js"></script>
<script type="text/javascript" src="grid/DDgrid1.js"></script>


<style type="text/css">


#container {position:relative;float:right;margin:1em;}
div.workarea { border:2px;padding:10px; float:left }


.dd-demo {
position:relative;
border:2px solid #666;
text-align:center;
color:#fff;
cursor:move;
height:100px;
width:200px;
padding-bottom: 2px
}
ul.draglist {
position: relative;
width: 150px;
height:500px;
background: #f7f7f7;
border: 1px solid gray;
list-style: none;
margin:0;
padding:0;
}

ul.draglist li {
margin: 1px;
cursor: move;
}

ul.draglist_alt {
position: relative;
width: 200px;
list-style: none;
margin:0;
padding:0;
padding-bottom:20px;
}

ul.draglist_alt li {
margin: 1px;
cursor: move;
}


li.list1 {
background-color: #D1E6EC;
border:10px solid #7EA6B2;
}

li.list2 {
background-color: #D8D4E2;
border:10px solid #6B4C86;
}

#user_actions { float: right; }

</style>


<!--end custom header content for this example-->


</head>
<body id="yahoo-com" class=" yui-skin-sam">



</head><body>


<div class="workarea">
<h3>List 1</h3>

<ul id="ul1" class="draglist"><!--
<li class="list1" id="li1_1">list 1, item 1</li>
<li class="list1" id="li1_2">list 1, item 2</li>
<li class="list1" id="li1_3">list 1, item 3</li> -->
</ul>
<select name="light" id="light" onchange="return addit()" style="">
<option value="Shade">Shade</option>
<option value="Mostly Shady">Mostly Shady</option>
<option value="Sun or Shade">Sun or Shade</option>
<option value="Mostly Sunny">Mostly Sunny</option>
<option value="Sunny">Sunny</option>
</select>
</div>

<div class="workarea">

<h3>List 2</h3>
<ul id="target" class="draglist">
<div id="NewDiv7" class="dd-demo" ></div>
<div id="NewDiv8" class="dd-demo" ></div>
<!--
<li class="list2" id="li2_1">list 2, item 1</li>
<li class="list2" id="li2_2">list 2, item 2</li>
<li class="list2" id="li2_3">list 2, item 3</li>
</ul>-->
</div>
</div>


var i=0,l=1;
var j;
function addit()
{
i=i+1;
var el=document.createElement("li");
el.className='list1';
el.id='li1_'+i;
var k=new YAHOO.example.DDList("li1_"+i);
document.getElementById("ul1").appendChild(el);
new YAHOO.example.DDList("li1_"+i);
k.isTarget=false;
}
//////////////////////////////////////////////////////////////////////////////
// custom drag and drop implementation
//////////////////////////////////////////////////////////////////////////////

YAHOO.example.DDList = function(id, sGroup, config) {

YAHOO.example.DDList.superclass.constructor.call(this, id, sGroup, config);
this.logger = this.logger || YAHOO;
var el = this.getDragEl();
YAHOO.util.Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent

this.goingUp = false;
this.lastY = 0;
};

YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, {

startDrag: function(x, y) {
this.logger.log(this.id + " startDrag");

// make the proxy look like the source element
var dragEl = this.getDragEl();
var clickEl = this.getEl();
//Dom.setStyle(clickEl, "visibility", "hidden"); snija commented this line

dragEl.innerHTML = clickEl.innerHTML;

YAHOO.util.Dom.setStyle(dragEl, "color", YAHOO.util.Dom.getStyle(clickEl, "color"));
YAHOO.util.Dom.setStyle(dragEl, "backgroundColor", YAHOO.util.Dom.getStyle(clickEl, "backgroundColor"));
YAHOO.util.Dom.setStyle(dragEl, "border", "2px solid gray");
},

endDrag: function(e) {

var srcEl = this.getEl();
var proxy = this.getDragEl();

// Show the proxy element and animate it to the src element's location
YAHOO.util.Dom.setStyle(proxy, "visibility", "");
var a = new YAHOO.util.Motion(
proxy, {
points: {
to: YAHOO.util.Dom.getXY(srcEl)
}
},
0.2,
YAHOO.util.Easing.easeOut
)
var proxyid = proxy.id;
var thisid = this.id;

// Hide the proxy and show the source element when finished with the animation
a.onComplete.subscribe(function() {
YAHOO.util.Dom.setStyle(proxyid, "visibility", "hidden");
// Dom.setStyle(thisid, "visibility", "");
});
a.animate();
},

onDragDrop: function(e, id) {

// If there is one drop interaction, the li was dropped either on the list,
// or it was dropped on the current location of the source element.
if (YAHOO.util.DragDropMgr.interactionInfo.drop.length === 1) {

// The position of the cursor at the time of the drop (YAHOO.util.Point)
var pt = YAHOO.util.DragDropMgr.interactionInfo.point;

// The region occupied by the source element at the time of the drop
var region = YAHOO.util.DragDropMgr.interactionInfo.sourceRegion;

// Check to see if we are over the source element's location. We will
// append to the bottom of the list once we are sure it was a drop in
// the negative space (the area of the list without any list items)
if (!region.intersect(pt)) {
var destEl = YAHOO.util.Dom.get(id);
var destDD = YAHOO.util.DragDropMgr.getDDById(id);
//snija
var x=this.getEl();
var k=x.id;
if(k.substring(0,3)=='New')
{
destEl.appendChild(this.getEl());
}
else
{
var div1=document.createElement("div");
div1.className='ygrid-mso';
div1.id="NewDiv"+l;

destEl.appendChild(div1);


function renderKB(size){
return size + " KB";
}
function getDDText(){
var count = this.getSelectionCount();
return count == 1 ? '1 selected file' : count + ' selected files';
}

function moveRows(grid, dd, id, e){
if(grid.id!= id) { // if row order, let DDGrid handle it
var targetGrid = (id == 'ddgrid2' ? grid2 : grid3);
var indexes = grid.getSelectedRowIndexes();
grid.transferRows(indexes, targetGrid, targetGrid.getTargetRow(e), e.ctrlKey);
}
}

var dm = new YAHOO.ext.grid.DefaultDataModel([
['yahoo.js', 1.38],
['dom.js', 11.2],
['event.js', 9.31],
['dragdrop.js', 21.2],
['connection.js', 7.85],
['yui-ext-core.js', 34.9],
['tabs-lib.js', 4.82],
['splitbar-lib.js', 6.79]
]);

var cm = new YAHOO.ext.grid.DefaultColumnModel([
{header: 'File', width: 125},
{header: 'Size', width: 72, renderer:renderKB}
]);
var grid = new YAHOO.ext.grid.DDGrid(div1, dm, cm);
grid.getDragDropText = getDDText;
grid.render();

var d=new YAHOO.example.DDList(div1);
d.isTarget=true;
l=l+1;

}
destDD.isEmpty = false;
YAHOO.util.DragDropMgr.refreshCache();
}

}
},

onDrag: function(e) {

// Keep track of the direction of the drag for use during onDragOver
var y = YAHOO.util.Event.getPageY(e);

if (y < this.lastY) {
this.goingUp = true;
} else if (y > this.lastY) {
this.goingUp = false;
}

this.lastY = y;
},

onDragOver: function(e, id) {

var srcEl = this.getEl();
var destEl = YAHOO.util.Dom.get(id);
//alert(destEl.nodeName.toLowerCase());

// We are only concerned with list items, we ignore the dragover
// notifications for the list.
if (destEl.nodeName.toLowerCase() == "div"&&srcEl.nodeName.toLowerCase() == "div") {
//alert(destEl.nodeName.toLowerCase());

var orig_p = srcEl.parentNode;
var p = destEl.parentNode;
if (this.goingUp) {
//alert(srcEl);
p.insertBefore(srcEl, destEl); // insert above
} else {
//alert(p);
p.insertBefore(srcEl, destEl.nextSibling); // insert below
}

YAHOO.util.DragDropMgr.refreshCache();
}
}
});

(function() {new YAHOO.util.DDTarget("target");
new YAHOO.example.DDList("NewDiv7");
new YAHOO.example.DDList("NewDiv8");

})();
</script>
</body>
</html>

but my browser is showing an eror in yui-ext.js source file included in this file that
this.onScroll.fireEvent is not a function when i am trying to drag a row in the grid

Also another file i have included as a source in this file is DDgrid1.js
whose contents are:


YAHOO.ext.grid.DDGrid = function(){
YAHOO.ext.grid.DDGrid.superclass.constructor.apply(this, arguments);
this.enableDragDrop = true;
this.on('dragdrop', this.onRowsDropped, this, true);
// enables dropping rows from this grid on this grid
// required for row ordering via D&D
this.selfTarget = true;
this.selectAfterDrop = true;

};

YAHOO.extendX(YAHOO.ext.grid.DDGrid, YAHOO.ext.grid.Grid, {
render : function(){
YAHOO.ext.grid.DDGrid.superclass.render.call(this);
if(this.selfTarget){
this.target = new YAHOO.util.DDTarget(this.container.id, 'GridDD');
}
},

transferRows : function(indexes, targetGrid, targetRow, copy){
var dm = this.dataModel;
var targetDm = targetGrid.getDataModel();
var rowData = dm.getRows(indexes);
if(!copy){
indexes.sort();
for(var i = 0, len = indexes.length; i < len; i++) {
dm.removeRow(indexes[i]-i);
}
}
this.selModel.unlock();
this.selModel.clearSelections();
this.selModel.lock();
var selStart;
if(targetRow != null && targetRow < targetDm.getRowCount()){
targetDm.insertRows(targetRow, rowData);
selStart = targetRow;
}else{
targetDm.addRows(rowData);
selStart = targetDm.getRowCount()-indexes.length;
}
if(this.selectAfterDrop){
var sm = targetGrid.getSelectionModel();
sm.unlock();
sm.selectRange(selStart, selStart+indexes.length-1);
sm.lock();
}
},

getTargetRow : function(e){
YAHOO.util.Event.stopEvent(e);
var xy = YAHOO.util.Event.getXY(e);
var cell = this.getView().getCellAtPoint(xy[0], xy[1]);
return cell ? Math.max(0, cell[1]) : null;
},

onRowsDropped : function(grid, dd, id, e){

if(id == this.id) { // only handle if it's a row order drop
var indexes = this.getSelectedRowIndexes();
this.transferRows(indexes, this, this.getTargetRow(e));
}
}
});



please help me
i am not able to drag the rows after rendering the grid.

it is saying that this.onScroll.fireEvent is not a function in yui-ext.js which is a source file for me


Thanx
Nija

mystix
4 Sep 2007, 1:48 AM
refer to http://extjs.com/forum/showthread.php?t=6272, point 5.

also see http://extjs.com/forum/misc.php?do=bbcode

tip: no-one's fond of reading pigeon scratchings.