JQuery

How to drag and drop image in to the widget using jquery?

How to drag and drop image in to the widget using jquery?, someone asked me to explain?
By:

In this article we will discuss to drag and drop image in the widget using dragable and droppable properties in jQuery ui. While drag is in process, a function is used to call it will nofiy the status of the dragged image. We have set opacity by using css() method. Run the page and drag and drop image on to droppable panel.

Example:

<html>
<head>
    <title>Drag and drop image to the widget in jQuery</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript">
            $(document).ready(function ($) {
                $(".target").css({ opacity: "0.4" });
                $("#drag").draggable({ zIndex: 3 });
                $(".target").droppable({
                    drop: dropCallback,
                    greedy: true
                });
                function dropCallback(e) {
                    var message = $("<p></p>", {
                        id: "message",
                        text: "you have dropped in to " + e.target.id + " panel"
                    });
                    $("#status").empty().append(message);
                }
            });
    </script>
    <style type="text/css">
        #drag {
            width: 114px;
            height: 114px;
            margin-bottom: 5px;
            cursor: move;
            background: url(http://www.infinetsoft.com/Uploads/20160523103730logosmall.png) no-repeat;
            float: left;
        }
        #outer {
            width: 500px;
            height: 300px;
            border: 1px solid #D0C4C4;
            float: right;
            background-color: #FF5722;
       }
        #inner {
            width: 100px;
            height: 100px;
            border: 3px solid #000;
            position: relative;
               top: 100px;
    left: 200px;
            background-color: #FFFF99;
        }
        #status {
           width: 500px;
            border: 1px solid #D0C4C4;
            float: right;
            clear: right;
            color: #AD2525;
            height: 40px;
            font-size: 30px;
        }
         #message {
            margin: 0px;
            font-size: 80%;
        }
    </style>
</head>
<body>
    <div id="drag"></div>
    <div class="target" id="outer">
        <div class="target" id="inner"></div>
    </div>
    <div id="status">Drag and drop the image in to the widget</div>
</body>
</html> 

Output:

Before dragged in to panel:

before drag the image

after dropped in to panel:

after dragged in to inner panel

Related Article

Post your comments / questions



Recent Article