Questions Tags Users Unanswered

How to create a dataTransfer from scratch

Question is open.
2 answers (2 voices) (9737 views)
Hi,

I'm trying to make a drag & drop event appear from nowhere (a click from an element which can't be draggable, because of Silverlight), but I have difficulty creating my dataTransfer.
I want to click on an element, the onmousedown launch the ondragstart of a dummmy's element that can be dragged and dropped. Here is my code :


1.
2.
3.
4.
5.
6.
function mouseDown(e)
var element = document.getElementById('myElement');
var evObj = document.createEvent('DragEvent');
evObj.initDragEvent('dragstart', true, false, window, 0, e.screenX, e.screenY, e.clientX, e.clientY, false, false, false, false, 0, null, new DataTransfer());
element.dispatchEvent(evObj);


Of course, new DataTransfer() doesn't work. I have no idea what to do now.

Thanks
2 Answers
Thank you for the answer, but I already thought about this.
The problem with mousedown and mousemove is that it don't allow multi-browsers drag&drop. Or maybe I missed something on my search.

I found a piece of answer but I didn't try to make it work. Maybe that can inspire one of yours :

When mousedown on silverlight, send a message to javascript to open a window below the cursor and that could activate the dragstart from here.

I didn't try it by now but if someone already does, it should be interesting to know what kind of result that could do. Anyway, I will try it soon and will describe my impression to you about it (I hope this works fine without a lot of tricks).
I've edited my answer. - Dottoro -
This doesn't directly answer your question, but it will probably help.
The following example shows how to implement a custom drag-drop feature. It uses the mousedown, move and up events instead of drag events and should work in most common browsers. Just press the left mouse button over the blue rectangle, start dragging it and drop it into (or out of) the container.


1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
<!DOCTYPE html>
<html>
<head>
    <style>
        #blueElem {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        
        #dragElem {
            position: fixed;
            display: none;
            width: 100px;
            height: 100px;
            background-color: orange;
        }

        #dropTarget {
            width: 400px;
            height: 400px;
            border: 2px solid black;
        }

        #dropTarget.dragover {
            border-color: red;
        }
    </style>
    
    <script type="text/javascript">
        (function () {
            function OverDropTarget (event) {
                var dropTarget = document.getElementById ('dropTarget');
                var rect = dropTarget.getBoundingClientRect ();
                return (rect.left <= event.clientX && event.clientX < rect.right && rect.top <= event.clientY && event.clientY < rect.bottom);
            }

            function ShowDragElem (show) {
                var dragElem = document.getElementById ("dragElem");
                dragElem.style.display = show ? 'block' : 'none';
            }

            function UpdateDragElemPos (event) {
                var mouseX = event.clientX;
                var mouseY = event.clientY;

                var dragElem = document.getElementById ("dragElem");
                dragElem.style.left = mouseX + "px";
                dragElem.style.top = mouseY + "px";
            }

            function OnDragStart (event) {
                if (window.addEventListener) {  // all browsers except IE before version 9
                    window.addEventListener ("mousemove", OnDragMove, true);
                    window.addEventListener ("mouseup", OnDragEnd, true);
                }
                else {
                    var blueElem = document.getElementById ('blueElem');
                    if (blueElem.setCapture) {    // IE before version 9
                        blueElem.attachEvent ("onmousemove", OnDragMove);
                        blueElem.attachEvent ("onmouseup", OnDragEnd);
                        blueElem.attachEvent ("onlosecapture", OnDragLoseCapture);
                        blueElem.setCapture ();
                    }
                }

                ShowDragElem (true);
                UpdateDragElemPos (event);

                    // capturing and preventDefault are necessary to prevent selection and automatic scrolling during dragging in FF, OP and SA
                if (event.preventDefault) {
                    event.preventDefault ();
                }
            }
            function OnDragMove (event) {
                UpdateDragElemPos (event);
                
                    // drop into the container
                var color = OverDropTarget (event) ? 'orange' : 'black';
                var dropTarget = document.getElementById ('dropTarget');
                dropTarget.style.borderColor = color;
            }

            function OnDragEnd (event) {
                if (window.removeEventListener) {   // all browsers except IE before version 9
                    window.removeEventListener ("mousemove", OnDragMove, true);
                    window.removeEventListener ("mouseup", OnDragEnd, true);
                }
                else {
                    var blueElem = document.getElementById ('blueElem');
                    if (blueElem.releaseCapture) {    // IE before version 9
                        blueElem.detachEvent ("onmousemove", OnDragMove);
                        blueElem.detachEvent ("onmouseup", OnDragEnd);
                        blueElem.detachEvent ("onlosecapture", OnDragLoseCapture);
                        blueElem.releaseCapture ();
                    }
                }

                    // drop out of the container
                if (!OverDropTarget (event)) {
                    ShowDragElem (false);
                }
            }

            function OnDragLoseCapture (event) {
                OnDragEnd (event);
            }

            function Init () {
                var blueElem = document.getElementById ('blueElem');
                if (blueElem.addEventListener) {  // all browsers except IE before version 9
                    blueElem.addEventListener ("mousedown", OnDragStart, false);
                }
                else {
                    if (blueElem.attachEvent) {   // IE before version 9
                        blueElem.attachEvent ("onmousedown", OnDragStart);
                    }
                }
            }

            if (window.addEventListener) {
                window.addEventListener ("load", Init, false);
            }
            else {
                window.attachEvent ("onload", Init);
            }
        }) ();
    </script>
</head>
<body>
    <div id="blueElem"></div>
    <div id="dragElem"></div>
    <br /><br /><br /><br /><br />
    <div id="dropTarget"></div>
</body>
</html>


--------------------------------
EDIT:

Mousedown-move-up:
You are right, mousedown does not allow multi-browsers drag&drop except when the two windows can access each other (window.opener, window.parent).

Drag-drop:
I don't think it is possible to create an instance of the dataTransfer object in JavaScript. The only way I can imagine doing this is to create your own DataTransfer object like this (only works in Internet Explorer):

1.
2.
3.
4.
var MyDataTransfer = function () {};
MyDataTransfer.prototype = window.DataTransfer.prototype;

var dt = new MyDataTransfer ();


But I don't think this would be the right direction. It would be much better if silverlight would start the drag operation and the dragstart event would fire on an HTML element (as you mentioned above).
In this case, the most you might need to do is change the data on the clipboard. The setData method of the DataTransfer object allows you to do it. The example on the bottom of the page shows how to do it.


I hope that helps.
If you have any questions, please feel free to ask.
15 30 50 per page

Your Answer

Limit of files to attach: 3 / Max total size: 1024 KB
File:
Description:
remove