locked
How to implement Drag and Drop for HTML5 <select><option> element

 > 

    Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    I'm trying to implement the Drag and Drop functionality in my Html page. When I drag the <div> element it works like a charm but, when I try to drag the <option> element, nothing happens. Everybody on the web says that in Html5, any and all elements can be dragged!!! The following is the simplified version of my web page. What am I missing here?

    (Please note that I'm using the <select> element with "size=5" attribute; essentially using it as a listbox.)

    Thanks.

    Dilip

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Drag-N-Drop</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript">
        function dragged(event) {
            event.dataTransfer.effectAllowed = "copy";
            event.dataTransfer.dropEffect = "copy";
            event.dataTransfer.setData("text", "Hello World");
            return false;
        }
        function dropped(event) {
            event.stopPropagation();
            event.preventDefault();
            alert(event.dataTransfer.getData("text"));
            return false;
        }
        function doNothing(event) {
            event.stopPropagation();
            event.preventDefault();
            return false;
        }
    </script>
</head>
<body>
    <select id="myList" size="5">
        <option draggable="true" ondragstart="dragged(event)">Item1</option>
        <option draggable="true" ondragstart="dragged(event)">Item2</option>
        <option draggable="true" ondragstart="dragged(event)">Item3</option>
        <option draggable="true" ondragstart="dragged(event)">Item4</option>
        <option draggable="true" ondragstart="dragged(event)">Item5</option>
    </select>
    <div id="div1"
         draggable="true" 
         ondragstart="dragged(event);"
         style="height: 100px; width: 100px; background-color: lightgreen;" >
    </div>
    <div id="div2" 
         dropzone="copy"
         ondrop="dropped(event);" 
         ondragenter="doNothing(event);"
         ondragleave="doNothing(event);"
         ondragover="doNothing(event);"
         style="height: 100px; width: 100px; background-color: lightgray;" >
    </div>
</body>
</html>

    DK

    Thursday, September 26, 2013 3:11 AM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi DilipK,

    Personally I don't think you could drag and drop an option element, read here:

    Except for background-color and color, style settings applied through the style object for the option element are ignored. In addition, style settings applied directly to individual options override those applied to the containing select element as a whole.

    Basically drag and drop will modify the position of the option element, which is a "style" changing, the system will ignore the changing, and I think therefore you could not drag and drop an option element.

    Best Regards,

    --James

    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Thursday, September 26, 2013 5:22 AM
    Moderator