Drag and drop elements in a desired position inside div

Question

Drag and drop elements in a desired position inside div

Donald Symmons 3,066

I am trying to drag and drop multiple elements separately to a preferred position but when I drag one element the other one moves as well.

How can each element separately?

For example, I have 3 elements (Label1, Label2 and Image1 controls). I want to be able to drag each of these controls separately to a desired position inside a particular div tag.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous" />
    <script defer="" src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet" media="all" />
    <link href="css/bootstrap.css" rel="stylesheet" media="all" />
     <title>Certificate</title>
    <style type="text/css">
        html {
            font-size: 72.5%;
        }
        @media screen and (max-width: 600) {
            html {
                font-size: 58%;
            }
        }
        .wrapper {
            display: flex;
            width: 100%;
            align-items: stretch;
            min-height: 100vh;
        }
        #content{
            flex: auto;
        }
 
           .imgfile {
            position: relative;
            object-fit: cover;
            height: auto;
            width: 100%;
            border: none;
            background-repeat: no-repeat;
            background-image:url('');
            background-size:cover;
            background-position: center;
            vertical-align: middle;
            background-color: white;
        }
           #output {
            font-size: 12px;
            text-align: center;
            display: flex;
            align-items: stretch;
            border: none;
        }
           #recipient {
            position: absolute;
            font-size: 3rem;
            bottom: 10px;
            cursor: move;
            backface-visibility: hidden;
            background: unset;
           }
        #dated {
            position: absolute;
            bottom: 10px;
            right: 50px;
            font-size: 2.5rem;
            cursor: move;
            backface-visibility: hidden;
            background: unset;
        }
        #Image1 {
            bottom: 10px;
            cursor: move;
            backface-visibility: hidden;
            background: unset;
           }
    </style>
</head>
<body style="background-color: #fdfdfd; font-family: 'Graphik', sans-serif; font-size: 17px; font-weight: 400;">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
        <div class="wrapper">
            <div id="content" style="font-size: 10pt; width: 100%;">
                <div class="grids">
                    <div class="row col-sm-12" style="width: 100%; margin: 0 auto; padding: 6px; margin-right: auto; margin-left: auto; margin-bottom: 20px;">
                        <div class="col-sm-8" style="width: 100%; margin: 0 auto; padding: 6px; margin-bottom: 20px;">
                            <div class="row">
                                <div class="col-md-12" style="width: 100%; margin: 0 auto;">
                                    <div class="form-group">
                                        <asp:Label ID="Label17" runat="server" Style="color: #ba2424; font-weight: 500;">Upload your certificate design, leave the name and date empty on the design image (referred format is .png)</asp:Label>
                                        <div class="input-group">
                                            <asp:FileUpload ID="certuploadfile" runat="server" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div runat="server" class="certcontain" id="output">
                                <asp:Image Class="imgfile" ID="imgfile" runat="server" />
                            </div>
                            <div class="list" draggable="true"></div>
                        </div>
                        <div class="col-sm-4" style="width: 100%; margin: 0 auto; padding: 10px; margin-top: 50px;">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <asp:Label ID="recipient" runat="server" Text="Recipient Name"></asp:Label>
                                        <asp:Label ID="dated" runat="server" Text="Date"></asp:Label>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <asp:Label CssClass="element" ID="Label8" runat="server">Recipient</asp:Label>
                                        <div class="input-group">
                                            <asp:TextBox ID="TextBox6" runat="server" AutoCompleteType="None" Height="33" CssClass="form-control" placeholder="e.g Charles Johnson" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <asp:Label CssClass="element" ID="Label3" runat="server">Date</asp:Label>
                                        <div class="input-group">
                                            <input type="date" id="TextBoxDate" runat="server" class="form-control" style="font-size: 10pt; height: 33px;" placeholder="e.g. month day, year" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <asp:Image ID="Image1" runat="server" ImageUrl="image.png" BorderStyle="None" Width="86px" Height="90px" />
                            <div class="btndiv" style="margin: 0 auto; width: 100%; margin-top: 5%;">
                                <asp:Button ID="CertBtn" runat="server" CssClass="btn btn-primary navbar-btn" Text="Save Certificate" />
                            </div>
                        </div>
                    </div>
                    <br />
                </div>
            </div>
        </div>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
     <script type="text/javascript">
         $(function () {
             var fileUpload = $("[id*=certuploadfile]");
             var img = $("[id*=imgfile]");
             img.click(function () { fileUpload.click(); });
             fileUpload.change(function () {
                 var reader = new FileReader();
                 reader.onload = function (e) {
                     $("[id*=imgfile]").attr("src", e.target.result);
                 }
                 reader.readAsDataURL($(this)[0].files[0]);
             });
         });
     </script>
    <script type="text/javascript">
        var dragItem = document.querySelector("#recipient");
        var container = document.querySelector("#output");

        var active = false;
        var currentX;
        var currentY;
        var initialX;
        var initialY;
        var xOffset = 0;
        var yOffset = 0;

        document.addEventListener("touchstart", dragStart, false);
        document.addEventListener("touchend", dragEnd, false);
        document.addEventListener("touchmove", drag, false);

        document.addEventListener("mousedown", dragStart, false);
        document.addEventListener("mouseup", dragEnd, false);
        document.addEventListener("mousemove", drag, false);

        function dragStart(e) {
            if (e.type === "touchstart") {
                initialX = e.touches[0].clientX - xOffset;
                initialY = e.touches[0].clientY - yOffset;
            } else {
                initialX = e.clientX - xOffset;
                initialY = e.clientY - yOffset;
            }

            if (e.target === dragItem) {
                active = true;
            }
        }

        function dragEnd(e) {
            initialX = currentX;
            initialY = currentY;
            active = false;
        }

        function drag(e) {
            if (active) {

                e.preventDefault();

                if (e.type === "touchmove") {
                    currentX = e.touches[0].clientX - initialX;
                    currentY = e.touches[0].clientY - initialY;
                } else {
                    currentX = e.clientX - initialX;
                    currentY = e.clientY - initialY;
                }

                xOffset = currentX;
                yOffset = currentY;

                setTranslate(currentX, currentY, dragItem);
            }
        }

        function setTranslate(xPos, yPos, el) {
            el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
        }
    </script>
        <script type="text/javascript">
            var dragDate = document.querySelector("#dated");
            var container = document.querySelector("#output");

            var active = false;
            var currentX;
            var currentY;
            var initialX;
            var initialY;
            var xOffset = 0;
            var yOffset = 0;

            document.addEventListener("touchstart", StartDrag, false);
            document.addEventListener("touchend", EndDrag, false);
            document.addEventListener("touchmove", grab, false);

            document.addEventListener("mousedown", StartDrag, false);
            document.addEventListener("mouseup", EndDrag, false);
            document.addEventListener("mousemove", grab, false);

            function StartDrag(e) {
                if (e.type === "touchstart") {
                    initialX = e.touches[0].clientX - xOffset;
                    initialY = e.touches[0].clientY - yOffset;
                } else {
                    initialX = e.clientX - xOffset;
                    initialY = e.clientY - yOffset;
                }

                if (e.target === dragDate) {
                    active = true;
                }
            }

            function EndDrag(e) {
                initialX = currentX;
                initialY = currentY;
                active = false;
            }

            function grab(e) {
                if (active) {

                    e.preventDefault();

                    if (e.type === "touchmove") {
                        currentX = e.touches[0].clientX - initialX;
                        currentY = e.touches[0].clientY - initialY;
                    } else {
                        currentX = e.clientX - initialX;
                        currentY = e.clientY - initialY;
                    }

                    xOffset = currentX;
                    yOffset = currentY;

                    setTranslate(currentX, currentY, dragDate);
                }
            }

            function setTranslate(xPos, yPos, el) {
                el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
            }
        </script>
</body>
</html>

SurferOnWww 3,911 Reputation points

2023-12-07T02:11:01.7133333+00:00

Can you show the code only related to your issue "I want to be able to drag each of these controls separately to a desired position inside a particular div tag"?

Donald Symmons 3,066

Hi @SurferOnWww ,

HTML

<div class="row">                                <div class="col-md-12">                                    <div class="form-group">                                        <asp:Label ID="recipient" runat="server" Text="Recipient Name"></asp:Label>                                        <asp:Label ID="dated" runat="server" Text="Date"></asp:Label><asp:Image ID="Image1" runat="server" ImageUrl="image.png" BorderStyle="None" Width="86px" Height="90px" />                                    </div>                                </div>                            </div>

JavaScript

  <script type="text/javascript">
        var dragItem = document.querySelector("#recipient");
        var container = document.querySelector("#output");

        var active = false;
        var currentX;
        var currentY;
        var initialX;
        var initialY;
        var xOffset = 0;
        var yOffset = 0;

        document.addEventListener("touchstart", dragStart, false);
        document.addEventListener("touchend", dragEnd, false);
        document.addEventListener("touchmove", drag, false);

        document.addEventListener("mousedown", dragStart, false);
        document.addEventListener("mouseup", dragEnd, false);
        document.addEventListener("mousemove", drag, false);

        function dragStart(e) {
            if (e.type === "touchstart") {
                initialX = e.touches[0].clientX - xOffset;
                initialY = e.touches[0].clientY - yOffset;
            } else {
                initialX = e.clientX - xOffset;
                initialY = e.clientY - yOffset;
            }

            if (e.target === dragItem) {
                active = true;
            }
        }

        function dragEnd(e) {
            initialX = currentX;
            initialY = currentY;
            active = false;
        }

        function drag(e) {
            if (active) {

                e.preventDefault();

                if (e.type === "touchmove") {
                    currentX = e.touches[0].clientX - initialX;
                    currentY = e.touches[0].clientY - initialY;
                } else {
                    currentX = e.clientX - initialX;
                    currentY = e.clientY - initialY;
                }

                xOffset = currentX;
                yOffset = currentY;

                setTranslate(currentX, currentY, dragItem);
            }
        }

        function setTranslate(xPos, yPos, el) {
            el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
        }
    </script>
        <script type="text/javascript">
            var dragDate = document.querySelector("#dated");
            var container = document.querySelector("#output");

            var active = false;
            var currentX;
            var currentY;
            var initialX;
            var initialY;
            var xOffset = 0;
            var yOffset = 0;

            document.addEventListener("touchstart", StartDrag, false);
            document.addEventListener("touchend", EndDrag, false);
            document.addEventListener("touchmove", grab, false);

            document.addEventListener("mousedown", StartDrag, false);
            document.addEventListener("mouseup", EndDrag, false);
            document.addEventListener("mousemove", grab, false);

            function StartDrag(e) {
                if (e.type === "touchstart") {
                    initialX = e.touches[0].clientX - xOffset;
                    initialY = e.touches[0].clientY - yOffset;
                } else {
                    initialX = e.clientX - xOffset;
                    initialY = e.clientY - yOffset;
                }

                if (e.target === dragDate) {
                    active = true;
                }
            }

            function EndDrag(e) {
                initialX = currentX;
                initialY = currentY;
                active = false;
            }

            function grab(e) {
                if (active) {

                    e.preventDefault();

                    if (e.type === "touchmove") {
                        currentX = e.touches[0].clientX - initialX;
                        currentY = e.touches[0].clientY - initialY;
                    } else {
                        currentX = e.clientX - initialX;
                        currentY = e.clientY - initialY;
                    }

                    xOffset = currentX;
                    yOffset = currentY;

                    setTranslate(currentX, currentY, dragDate);
                }
            }

            function setTranslate(xPos, yPos, el) {
                el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
            }
        </script>

Accepted answer

0 additional answers

Your answer

SurferOnWww 3,911 Reputation points

2023-12-07T02:11:01.7133333+00:00

Can you show the code only related to your issue "I want to be able to drag each of these controls separately to a desired position inside a particular div tag"?

Answer 1

Hi @Donald Symmons,

According to your code design, Label (#recipient) and Label (#dated) will be triggered at the same time when Drag and drop, although you wrote them separately in js.

You can try the following code. Put the parts you need to Drag and drop into an element.

We still need to spend time researching your other requirement, thank you for your understanding.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous" />
    <script defer="" src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <link href="css/bootstrap.min.css" rel="stylesheet" media="all" />
    <link href="css/bootstrap.css" rel="stylesheet" media="all" />
    <title>Certificate</title>
    <style type="text/css">
        html {
            font-size: 72.5%;
        }

        @media screen and (max-width: 600) {
            html {
                font-size: 58%;
            }
        }

        .wrapper {
            display: flex;
            width: 100%;
            align-items: stretch;
            min-height: 100vh;
        }

        #content {
            flex: auto;
        }

        .imgfile {
            position: relative;
            object-fit: cover;
            height: auto;
            width: 100%;
            border: none;
            background-repeat: no-repeat;
            background-image: url('');
            background-size: cover;
            background-position: center;
            vertical-align: middle;
            background-color: white;
        }

        #output {
            font-size: 12px;
            text-align: center;
            display: flex;
            align-items: stretch;
            border: none;
        }

        #recipient {
            position: absolute;
            font-size: 3rem;
            bottom: 10px;
            cursor: move;
            backface-visibility: hidden;
            background: unset;
        }

        #dated {
            position: absolute;
            bottom: 10px;
            right: 50px;
            font-size: 2.5rem;
            cursor: move;
            backface-visibility: hidden;
            background: unset;
        }

        #Image1 {
            bottom: 10px;
            cursor: move;
            backface-visibility: hidden;
            background: unset;
        }
    </style>
</head>
<body style="background-color: #fdfdfd; font-family: 'Graphik', sans-serif; font-size: 17px; font-weight: 400;">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
        <div class="wrapper">
            <div id="content" style="font-size: 10pt; width: 100%;">
                <div class="grids">
                    <div class="row col-sm-12" style="width: 100%; margin: 0 auto; padding: 6px; margin-right: auto; margin-left: auto; margin-bottom: 20px;">
                        <div class="col-sm-8" style="width: 100%; margin: 0 auto; padding: 6px; margin-bottom: 20px;">
                            <div class="row">
                                <div class="col-md-12" style="width: 100%; margin: 0 auto;">
                                    <div class="form-group">
                                        <asp:Label ID="Label17" runat="server" Style="color: #ba2424; font-weight: 500;">Upload your certificate design, leave the name and date empty on the design image (referred format is .png)</asp:Label>
                                        <div class="input-group">
                                            <asp:FileUpload ID="certuploadfile" runat="server" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div runat="server" class="certcontain" id="output">
                                <asp:Image Class="imgfile" ID="imgfile" runat="server" />
                            </div>
                            <div class="list"></div>
                        </div>

                        <div class="col-sm-4" id="section" style="width: 100%; margin: 0 auto; padding: 10px; margin-top: 50px;">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <asp:Label ID="recipient" runat="server" Text="Recipient Name"></asp:Label>
                                        <asp:Label ID="dated" runat="server" Text="Date"></asp:Label>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <asp:Label CssClass="element" ID="Label8" runat="server">Recipient</asp:Label>
                                        <div class="input-group">
                                            <asp:TextBox ID="TextBox6" runat="server" AutoCompleteType="None" Height="33" CssClass="form-control" placeholder="e.g Charles Johnson" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <asp:Label CssClass="element" ID="Label3" runat="server">Date</asp:Label>
                                        <div class="input-group">
                                            <input type="date" id="TextBoxDate" runat="server" class="form-control" style="font-size: 10pt; height: 33px;" placeholder="e.g. month day, year" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <asp:Image ID="Image1" runat="server" ImageUrl="image.png" BorderStyle="None" Width="86px" Height="90px" />
                            <div class="btndiv" style="margin: 0 auto; width: 100%; margin-top: 5%;">
                                <asp:Button ID="CertBtn" runat="server" CssClass="btn btn-primary navbar-btn" Text="Save Certificate" />
                            </div>
                        </div>

                    </div>
                    <br />
                </div>
            </div>
        </div>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
      <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var fileUpload = $("[id*=certuploadfile]");
            var img = $("[id*=imgfile]");
            img.click(function () { fileUpload.click(); });
            fileUpload.change(function () {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $("[id*=imgfile]").attr("src", e.target.result);
                }
                reader.readAsDataURL($(this)[0].files[0]);
            });
        });
    </script>
    <script type="text/javascript">
        var container = document.querySelector("#section");
        var activeItem = null;

        var active = false;

        container.addEventListener("touchstart", dragStart, false);
        container.addEventListener("touchend", dragEnd, false);
        container.addEventListener("touchmove", drag, false);

        container.addEventListener("mousedown", dragStart, false);
        container.addEventListener("mouseup", dragEnd, false);
        container.addEventListener("mousemove", drag, false);



        function dragStart(e) {

            if (e.target !== e.currentTarget) {
                active = true;
                activeItem = e.target;

                if (activeItem !== null) {
                    if (!activeItem.xOffset) {
                        activeItem.xOffset = 0;
                    }

                    if (!activeItem.yOffset) {
                        activeItem.yOffset = 0;
                    }

                    if (e.type === "touchstart") {
                        activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
                        activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
                    } else {
                        console.log("doing something!");
                        activeItem.initialX = e.clientX - activeItem.xOffset;
                        activeItem.initialY = e.clientY - activeItem.yOffset;
                    }
                }
            }
        }

        function dragEnd(e) {
            if (activeItem !== null) {
                activeItem.initialX = activeItem.currentX;
                activeItem.initialY = activeItem.currentY;
            }

            active = false;
            activeItem = null;
        }

        function drag(e) {
            if (active) {
                e.preventDefault();
                if (e.type === "touchmove") {

                    activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
                    activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
                } else {
                    activeItem.currentX = e.clientX - activeItem.initialX;
                    activeItem.currentY = e.clientY - activeItem.initialY;
                }

                activeItem.xOffset = activeItem.currentX;
                activeItem.yOffset = activeItem.currentY;

                setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
            }
        }

        function setTranslate(xPos, yPos, el) {
            el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
        }
    </script>

</body>
</html>

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Donald Symmons 3,066 Reputation points

2023-12-08T08:13:23.8366667+00:00

Hi @Lan Huang-MSFT ,

We still need to spend time researching your other requirement, thank you for your understanding.

Which other requirement please?

Do you mean dragging the Image control as well?
Lan Huang-MSFT 30,176 Reputation points Microsoft External Staff

2023-12-08T08:21:06.6233333+00:00

Hi @Donald Symmons,

No, the above code can already meet your requirements for this post, including dragging the Image control.

What I mentioned is the requirement in your other post(Retain/Keep new position of elements after drag and drop), I still need some time to test it.
Donald Symmons 3,066 Reputation points

2023-12-08T13:17:47.46+00:00

Oh! Okay. I thought that post was rejected because I could not see it here.

Share via

Drag and drop elements in a desired position inside div

0 additional answers

Your answer