---
title: "Dra lager + trigger"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/124554-dra-lager-trigger"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "ironhead"
published: "2005-03-16T21:54:26.000Z"
updated: "2006-06-16T08:18:47.000Z"
replies: 9
views: 590
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/124554-dra-lager-trigger"
---

# Dra lager + trigger

## #1 — ironhead, 2005-03-16T21:54Z

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>
```

Permalänk: https://www.webforum.nu/p/124554

## #2 — ironhead, 2005-03-17T08:17Z

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>
```

Permalänk: https://www.webforum.nu/p/1573850

## #3 — ironhead, 2005-03-19T21:14Z

Ä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?

Permalänk: https://www.webforum.nu/p/1575028

## #4 — ironhead, 2005-03-23T09:09Z

```
<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

Permalänk: https://www.webforum.nu/p/1579360

## #5 — Palle, 2005-03-23T12:18Z

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]
```

Permalänk: https://www.webforum.nu/p/1579426

## #6 — ironhead, 2005-03-23T12:37Z

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

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

Permalänk: https://www.webforum.nu/p/1579435

## #7 — ironhead, 2005-03-23T12:42Z

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

Permalänk: https://www.webforum.nu/p/1579440

## #8 — ironhead, 2005-03-23T13:03Z

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

Permalänk: https://www.webforum.nu/p/1579454

## #9 — echoSwe, 2005-03-29T14:45Z

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

Permalänk: https://www.webforum.nu/p/1581588

## #10 — skarbratt, 2006-06-16T08:18Z

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.

Permalänk: https://www.webforum.nu/p/1829784

---

Tråden på webben: https://www.webforum.nu/amne/javascript/124554-dra-lager-trigger
