Drag anDrop, o que pode ser feito?

[Hedi 2]

Pessoal sempre quiz fazer o tal do drang and drop (arrastar e soltar), ate que enfim consegui, veja coloquei um exmplo aki:

 

para utilizar execute primeiro esta pagina para inserir os registro no banco de dados:

 

http://www.maisqueamigos.com/teste/drag/criadb.php

 

aqui a pagina de tste:

 

http://www.maisqueamigos.com/teste/drag/

 

o que pode ser feito com este recurso? alguem tem alguma ideia?

abraços

[Wilker 3]

ai vai a criatividade do desenvolvedor :Peu to agora criando uma framework para desenvolvimento de webso em JavaScript (simulacao de sistema operacional em um site)e uso mto drag and drop, afinal, um SO vive disso XDuso para arrastar janelas, criar atalhos na area de trabalho... a usuabilidade eh infinita XD

[Messiah 0]

poderia publicar seus codigos?

[Wilker 3]

alguns sim, se quize ai vai a API de Drag Drop

 

obs: requer o prototype

 

/******************************************************//**** Wilker Dragable API *****************************//******************************************************//** versao:	1.0								   **//** autor:	 Wilker Lúcio da Silva				 **//** descrição: API para arrastar objetos			 **//******************************************************/var Dragable = Class.create();Object.extend(Dragable.prototype, {	initialize: function(toMove, activator, autoPosition) {		this.obj = $(toMove);		this.activator = $(activator);		this.ranges = [0, 0, 0, 0];		this.limits = [-1, -1, -1, -1];		this.enabled = true;		this.dragging = false;		this.autoPosition = autoPosition === false ? false : true;		this.position = {x: 0, y: 0};				this.onstart = new cEvent();		this.onmove = new cEvent();		this.onfinish = new cEvent();				Event.observe(this.activator, 'mousedown', this.start.bind(this));	},		configureLimitsToScreen: function() {		var size = window.getInternalSize();		this.limits = [0, 0, size.width, size.height];				Event.observe(window, 'resize', function() {			var size = window.getInternalSize();			this.limits = [0, 0, size.width, size.height];						var pos = Element.getPosition(this.obj);			var sizeObj = Element.getDimensions(this.obj);						if((pos.x + sizeObj.width) > size.width)				this.obj.style.left = (size.width - sizeObj.width) + 'px';						if((pos.y + sizeObj.height) > size.height)				this.obj.style.top = (size.height - sizeObj.height) + 'px';		}.bind(this));	},		start: function(evt) {		if(!this.enabled)			return;				if(this.dragging)			return;				var e = evt || event;		var pos = Element.getPosition(this.obj);				var space = [pos.x - Event.pointerX(e), pos.y - Event.pointerY(e)];				if(this.autoPosition && this.obj.style.position != 'absolute')			this.obj.style.position = 'absolute';					this.initialPos = pos;				this.observerMove = this.doDrag.bind(this, space);		this.observerOut  = this.finish.bind(this, space);				Event.observe(document, 'mousemove', this.observerMove);		Event.observe(this.activator, 'mousemove', this.observerMove);		Event.observe(document, 'mouseup', this.observerOut);				window.disableSelection();				this.dragging = true;				this.onstart.fire(this, pos, space, e);	},		doDrag: function(space, evt) {		var e = evt || event;				this.onmove.fire(this, this.makePositioned(e, space));	},		makePositioned: function(e, space) {		var x = Event.pointerX(e) + space[0];		var y = Event.pointerY(e) + space[1];				var difX = x - this.initialPos.x;		var difY = y - this.initialPos.y;				if(this.ranges[0] > 0 && difY < (this.ranges[0] * -1))			y = this.initialPos.y - this.ranges[0];				if(this.ranges[1] > 0 && difX > (this.ranges[1]))			x = this.initialPos.x + this.ranges[1];				if(this.ranges[2] > 0 && difY > (this.ranges[2]))			y = this.initialPos.y + this.ranges[2];				if(this.ranges[3] > 0 && difX < (this.ranges[3] * -1))			x = this.initialPos.x - this.ranges[3];				var size = Element.getDimensions(this.obj);				if(this.limits[0] >= 0 && x < this.limits[0])			x = this.limits[0];				if(this.limits[1] >= 0 && y < this.limits[1])			y = this.limits[1];				if(this.limits[2] >= 0 && (x + size.width) > this.limits[2])			x = this.limits[2] - size.width;				if(this.limits[3] >= 0 && (y + size.height) > this.limits[3])			y = this.limits[3] - size.height;				if(this.autoPosition) {			this.obj.style.left = x + 'px';			this.obj.style.top = y + 'px';		}				this.position = {x: x, y: y};		return [x, y];	},		finish: function(space, evt) {		var e = evt || event;				var pos = this.makePositioned(e, space);				Event.stopObserving(document, 'mousemove', this.observerMove);		Event.stopObserving(this.activator, 'mousemove', this.observerMove);		Event.stopObserving(document, 'mouseup', this.observerOut);				window.restoreSelecion();				this.dragging = false;				this.onfinish.fire(this, e, pos);	}});

[Messiah 0]

Estou montando um projeto para um fotografo.. e eu levantei a possibilidade de fazer o esquema de drag and drop pra ele adicionar as fotos a uma selecao para compra no site... uma especie de ecomerce, ele arrastaria as fotos para um icone carrinho... so que nunca fiz nada parecido ehehe... esse seu script poderia me ajudar?gostei do esquema do amigo Hedi pois pareceu usar banco de dados ligado ao drop.. vcs tem alguma dica? como eu poderia fazer isso...

[Wilker 3]

isso ai dispoe apenas um arrastador, ele pode ser usado sim, mas nao sozinho, voce tem que fazer varios eventos, mas ainda assim nao eh tao simples, se voce ainda nao se sentir muito seguro para fazer isso é melhor procurar alguma outra API que ja contenha pelo menos os pointers para onde arrastar o objeto. isso seria possivel com uma extensao a essa minha classe, mas eu recomendo você procurar algo que esteja mais completo :P

[Messiah 0]

isso ai dispoe apenas um arrastador, ele pode ser usado sim, mas nao sozinho, voce tem que fazer varios eventos, mas ainda assim nao eh tao simples, se voce ainda nao se sentir muito seguro para fazer isso é melhor procurar alguma outra API que ja contenha pelo menos os pointers para onde arrastar o objeto. isso seria possivel com uma extensao a essa minha classe, mas eu recomendo você procurar algo que esteja mais completo :P

é estou tentando dar uma pesquisada ver se acho algo... achei um artigo muito bom.... mais nao consegui utilizar ele ainda... da maneira que necessito...e ainda nao consegui intender bem como poderia fazer esse drag and drop no carrinho... http://www.webreference.com/programming/ja...umn2/index.html

[Hedi 2]

esse ai e apenas um teste, por exemplo em resoluções diferntes de1024x768 vai ficar bugado, e que estou sem tempo agora, mas quero mlhorar e desenvolver algo melhorabraços.

[Croft 0]

Sobre o arrastar para um carrinho, veja se isso ajuda:

 

http://demo.script.aculo.us/shop

 

até