Dra lager + trigger

9 svar · 586 visningar · startad av ironhead 16 mars 2005

ironheadMedlem sedan mars 20011 346 inlägg

Frågan16 mars 2005 21:54#1

Hej!

Jag har lite kod där man kan dra omkring lager, men jag skulle vilja att när jag drog nåt "objekt" och släppte den på nån av input-rutorna, så skulle ID:t på objektet hamna i hidden-rutan och själva namnet på objektet hamna i den synliga textruan...går det att göra?

<!doctype html public "-//IETF//DTD HTML//EN//2.0">
<html>
<head>

<style>
.drag{position:relative;cursor:hand}
</style>

<script language="JavaScript1.2">
<!--

var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}
}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")

//-->
</script>
</head>
<body bgcolor="#ffffff" text="#000000" topmargin="0" leftmargin="0">

<table border="1" cellpadding="2" cellspacing="2" align="left">
<tr>
<td><div class="drag" id="1">Objekt 1</div></td>
</tr><tr>
<td><div class="drag" id="2">Objekt 2</div></td>
</tr><tr>
<td><div class="drag" id="3">Objekt 3</div></td>
</tr><tr>
<td><div class="drag" id="4">Objekt 4</div></td>
</tr><tr>
<td><div class="drag" id="5">Objekt 5</div></td>
</tr><tr>
<td><div class="drag" id="6">Objekt 6</div></td>
</tr><tr>
<td><div class="drag" id="7">Objekt 7</div></td>
</tr><tr>
<td><div class="drag" id="8">Objekt 8</div></td>
</tr><tr>
<td><div class="drag" id="9">Objekt 9</div></td>
</tr><tr>
<td><div class="drag" id="10">Objekt 10</div></td>
</tr>
</table>

<table border="1" cellpadding="2" cellspacing="2" align="left">
<tr>
<td>
<input type="text" name="drag1">
<input type="hidden" name="drag1ID"></td>
<td>
<input type="text" name="drag2">
<input type="hidden" name="drag2ID"></td>
</tr>
</table>

</body>

ironheadMedlem sedan mars 20011 346 inlägg

17 mars 2005 08:17#2

Jag hittade denna kod hos Microsoft, men den visar ju texten från destinationen, inte från det objekt jag drar + att jag måste markera hela texten först.

<SCRIPT>
var oNewOption;		    
function ShowResults()
{
  arg = event.type + "  fired by  " + event.srcElement.id;  
  oNewOption = new Option(); 
  oNewOption.text = arg;
  oResults.add(oNewOption,0);
}
</SCRIPT>
</HEAD>
<BODY>
<div ID=txtDragOrigin NAME="txtDragOrigin">Text to Drag</div>
<INPUT ID=txtDragDestination ondrop="ShowResults()" NAME="txtDragDestination">
<SELECT ID=oResults size="3" NAME="oResults">
</SELECT>

ironheadMedlem sedan mars 20011 346 inlägg

19 mars 2005 21:14#3

Är det så att det inte går?
Måste man då i databasen kolla ordet man droppar i rutan å mha det kolla id:t?

ironheadMedlem sedan mars 20011 346 inlägg

23 mars 2005 09:09#4

<script>
function markText(divId) {
	var myElement = document.getElementById(divId)
	if (window.getSelection) {
		var myRange = document.createRange()
		myRange.selectNodeContents(myElement)
		var mySelection = window.getSelection()
		mySelection.removeAllRanges()
		mySelection.addRange(myRange)
	}
	else if (document.selection) {
		var myRange = document.body.createTextRange()
		myRange.moveToElementText(myElement)
		myRange.select()
	}
}
</script>

<DIV id="id1" onclick="markText('id1');">Test1</DIV>
<DIV id="id2" onclick="markText('id2');">Test2</DIV>

<INPUT type="text" id="Text" name="Drop">
<INPUT type="text" id="ID" name="DropID">

Har bestämt mig för att använda denna kod.

Om det inte finns något bra sätt att visa id-taggen i rutan bredvid, kan någon tipsa om nån "ful-lösning" i så fall....börjar bli desperat efter bra tips :l

PalleMedlem sedan apr. 20003 174 inlägg

23 mars 2005 12:18#5

Ok, en ful-lösning var det beställt. §jr :e

[red]<script type="text/javascript">

function markText(divId) {
	var myElement = document.getElementById(divId)
	if (window.getSelection) {
		var myRange = document.createRange()
		myRange.selectNodeContents(myElement)
		var mySelection = window.getSelection()
		mySelection.removeAllRanges()
		mySelection.addRange(myRange)
	}
	else if (document.selection) {
		var myRange = document.body.createTextRange()
		myRange.moveToElementText(myElement)
		myRange.select()
	}
	window.clipboardData.setData("Text", divId);
	document.getElementById('Text').value = '';
	document.getElementById('ID').value = '';
}

function idTransfer(frm)
{
	if(!frm.value.length==0)
	{
		document.getElementById('ID').value = window.clipboardData.getData("Text");
	}
}

</script>

...

<DIV id="id1" onmousedown="markText('id1');">Test1</DIV>
<DIV id="id2" onmousedown="markText('id2');">Test2</DIV>

<INPUT type="text" id="Text" name="Drop" onfocus="idTransfer(this);">
<INPUT type="text" id="ID" name="DropID">[/red]

ironheadMedlem sedan mars 20011 346 inlägg

23 mars 2005 12:37#6

Palle skrev:

Ok, en ful-lösning var det beställt. §jr :e

Whohooo! Den funkar ju iaf :)
Ska testa den litegrann...

ironheadMedlem sedan mars 20011 346 inlägg

23 mars 2005 12:42#7

Problemet är att jag kommer att ha 20 st. input-rutor som jag ska kunna dra dessa lager till, och vill ha id på :-/

ironheadMedlem sedan mars 20011 346 inlägg

23 mars 2005 13:03#8

Modifierade ditt skript litegrann, och det verkar fungera ;)

<script language="javascript">

function markText(divId) {
	
	var myElement = document.getElementById(divId)
		
	if (window.getSelection) {
		var myRange = document.createRange()
		myRange.selectNodeContents(myElement)
		var mySelection = window.getSelection()
		mySelection.removeAllRanges()
		mySelection.addRange(myRange)
	}
	else if (document.selection) {
		var myRange = document.body.createTextRange()
		myRange.moveToElementText(myElement)
		myRange.select()
	}
	window.clipboardData.setData("Text", divId);
}

function idTransfer(frm,oid)
{

	if(!frm.value.length==0)
	{
		document.getElementById(oid).value = window.clipboardData.getData("Text");
	}
}

</script>
<DIV id="id1" onmousedown="markText('id1');">Test1</DIV>
<DIV id="id2" onmousedown="markText('id2');">Test2</DIV>
<br>
Text:<INPUT type="text" id="Text1" onfocus="idTransfer(this,'IDs1');">
ID:  <INPUT type="text" id="IDs1">
<br>
Text:<INPUT type="text" id="Text2" onfocus="idTransfer(this,'IDs2');">
ID:  <INPUT type="text" id="IDs2">

Ett jättetack till Palle :birp

echoSweMedlem sedan nov. 20041 189 inlägg

29 mars 2005 14:45#9

HTML 2.0????!!!
(först posten)

skarbrattMedlem sedan juli 2000325 inlägg

16 juni 2006 08:18#10

Kan man få detta att funka att dra en bild till en annan, och inte bara lager, jag försökte med följande: <DIV id="id1" onmousedown="markText('id1');"><IMG SRC="bild.gif"></DIV> Men det vill inte fungera.