Drag & Drop image supported?

**Danneman** · 2009-04-21, 00:11

Is drag & drop images supported in wrt? Have a javascript that works elsewhere, but not in wrt. Perhaps there is another way of doing it that works in wrt?

**symbianyucca** · 2009-04-21, 08:07

you might need to work on the logic a bit, anyway, you should propably visit our wiki and see what is there already, for example this article might interest you: http://wiki.forum.nokia.com/index.ph...nd-drop_in_WRT

**Danneman** · 2009-04-21, 15:29

Thanks. All I need is to move two images, no other code. And the sample-code was too complex for my limited javascript-skills to extract that functionality alone, and the description on the page you linked to was too general for me to make any sens out of, and did not seem to fit my current code at all.

Anyway, this is my full html/js-code, and if you can spot what is wrong with it that would be great. Otherwise I think I'll leave that functionality for the future - need to study up on my js first, it seems.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script language="javascript" type="text/javascript" src="basic.js"></script>
    	<style type="text/css">
		@import "basic.css";
    	</style>

  <script type="text/javascript">
        var currentId;
        var objects = {};
        var zIndex = 0;
      
        function init() {
            document.addEventListener("touchstart", startmove, false);
            document.addEventListener("touchmove", move, false);
            document.addEventListener("touchend", endmove, false);
			
	// Movable images, named "image1" to "image2" in the html-code
            makeObjectMovable(image1);
            makeObjectMovable(image2);
        }

        function startmove(event) {
            var touch = event.touches[0];
            var id = touch.identifier;
            currentId = id;
            if (touch.target.className == "movable") {
                objects[id] = {
                    target: touch.target,
                    beginX: touch.clientX,
                    beginY: touch.clientY,
                    pozX: touch.target.pozXinit,
                    pozY: touch.target.pozYinit
                }
                touch.target.style.opacity = 0.5;
                touch.target.style.zIndex = ++zIndex;
            }
        }

        function endmove(event) {
            var touch = event.touches[0];
            var id = currentId;
            if (objects[id] != null) {
                if (objects[id].target.className == "movable") {
                    objects[id].target.style.opacity = 1;
                }
                delete objects[id];
            }
        }

        function move(event) {
            var touch = event.touches[0];
            var id = touch.identifier;
            if (objects[id].target.className == "movable") {
                objects[id].target.pozXinit = objects[id].pozX + touch.clientX - objects[id].beginX;
                objects[id].target.pozYinit = objects[id].pozY + touch.clientY - objects[id].beginY;
                objects[id].target.style['-webkit-transform'] = 'translate(' + objects[id].target.pozXinit + 'px,' + objects[id].target.pozYinit + 'px)';
            }
            event.preventDefault();
        }

        function makeObjectMovable(obj) {
            obj.className = "movable";
            obj.pozXinit = 0;
            obj.pozYinit = 0;
        }
    </script>
</head>

<body onload="init();">
	<img name="image1" id="image1" src="image1.png" />
	<img name="image2" id="image2" src="image2.png" />
</body>
</html>

**symbianyucca** · 2009-04-21, 16:10

Sorry, that example is 10 liner, so even javascript doesn't go too much easier than that.

**Danneman** · 2009-04-21, 16:49

I was refering to the solitaire-script, which is hardly a 10-liner.

Do you mean that the 10-liner on the page you linked to is functional as-is? I tried replacing the javascript in the head in the code above, but there I cant move the images.

Code:

	 	<script type="text/javascript">
			if (typeof e == 'undefined') {
 				myEvent = window.event;
 			} 
			else {
 					myEvent = e;
 			}
 			posX = myEvent.clientX;
 			posY = myEvent.clientY;

	  		document.onkeydown = self.onMouseDown;
 			document.onkeyup   = self.onMouseUp;
			
			var object = document.elementFromPoint(posX, posY);
		</script>

Discussion Board

Thread: Drag & Drop image supported?

Thread Tools

Search Thread

Rate This Thread

Display

Similar Threads

J2me Supported image formats

how to send an image to moblie OR what formats are supported

HELP: Mutable Image to Immutable Image?

What are the different image formats and maximum sizes supported for each v

Image formats supported in Nokia 9210 Communicator

Posting Permissions