Mailing Lists: Apple Mailing Lists
Image of Mac OS face in stamp
 
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

passing an image to setDragImage

A test page can be found at:

http://ericgorr.net/safaritest.html

The page source is below.

As one can see below, I create an image and assign it to the variable 'myImage'. In the third text span, I attempt to pass this image into the 'SpanDragHandlerSafari' function. However, something is not working and one cannot drag the text. The first text span, where I pass an image to 'SpanDragHandlerSafari' with 'document.testimg' does work.

Why does this not work? Is this a bug?

I do know that 'myImage' contains an image, because pressing the 'Test' button does what it is supposed to...insert the image into the src property of 'buttonimg'.

If anyone knows what I am doing wrong and how to make this work, I would appreciate knowing what that is.

Thank you.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd";>
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

    <title>Simple JavaScript</title>
    <script language="JavaScript" type="text/javascript">

        var myImage = new Image();
        myImage.src = "images/getfuzzy.gif";

        function BodyDragHandler() {
            alert('BodyDragHandler');
        }

        function BodyDragEndHandler() {
            alert( 'BodyDragEndHandler' );
        }

        function SpanDragHandlerSafari( image, text ) {
            event.dataTransfer.setData( "text/plain", text );
            event.dataTransfer.effectAllowed = "copy";
            document.buttonimg.src = image.src;
            event.dataTransfer.setDragImage( image, 5, 5 );
            //document.write( typeof( image.src ) + '<br>' );
            event.stopPropagation();
        }

        function SpanDragHandlerIE( text ) {
            event.dataTransfer.setData( "Text", text );
            event.dataTransfer.effectAllowed = "copy";
            window.event.cancelBubble = true;
        }

        function ButtonClick( anImage ) {
            document.buttonimg.src = anImage.src;
        }

    </script>

</head>
<body ondragstart="BodyDragHandler()" ondragend="BodyDragEndHandler()">

<span style="-khtml-user-drag:element; -khtml-user-select: none;" ondragstart="SpanDragHandlerSafari( document.testimg, 'its me' )">Drag this text (Safari). this works.</span>

    <br>

<span ondragstart="SpanDragHandlerIE( 'its me IE6' )">Drag this text (IE). This works.</span>

    <br>

<span style="-khtml-user-drag:element; -khtml-user-select: none;" ondragstart="SpanDragHandlerSafari( myImage, 'its me2' )">Drag this text (Safari). either crashes or will not drag.</span>

    <br>

<img style="-khtml-user-drag:element;" ondragstart="SpanDragHandlerSafari( document.testimg, 'its me safari picture drag' )" name="testimg" src="images/getfuzzy.gif" alt="test picture">(Safari Drag)

    <br>

<img ondragstart="SpanDragHandlerIE( 'its me picture' )" src="images/getfuzzy.gif" alt="test picture IE6">(IE Drag)

    <br>


    <button onclick="ButtonClick( myImage );">Test</button> <br>
    <img name="buttonimg" src="" alt="button picture">

    <br>

<script language="JavaScript" type="text/javascript">
document.write( typeof( document.testimg ) + '<br>' );
document.write( typeof( myImage ) + '<br>' );
document.write( typeof( myImage ) == typeof ( document.testimg ) );
</script>

</body>
</html>
_______________________________________________
Do not post admin requests to the list. They will be ignored.
Webkitsdk-dev mailing list      (email@hidden)
Help/Unsubscribe/Update your Subscription:
http://lists.apple.com/mailman/options/webkitsdk-dev/email@hidden

This email sent to email@hidden


Visit the Apple Store online or at retail locations.
1-800-MY-APPLE

Contact Apple | Terms of Use | Privacy Policy

Copyright © 2007 Apple Inc. All rights reserved.