jquery: drag and drop widgets_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-05 02:14 出处：网络

I am trying to create UI in which left panel consists of widgets and we can drag drop widgets to left work area for creating UI as we want and then use that.

I assume, this is possible with jquery. If not, can you please suggest me another way to do this?

My starting level code is:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>

<style>
    #draggable { width: 50px; height: 50px; padding: 0.5em; }
</style>

<script>
$(function()开发者_Go百科 {
    $( "#draggable" ).draggable();
});
</script>

</head>

<body>

<div class="demo">

    <div id="draggable" class="ui-widget-content">
        <img src="image.png" width="100"/>
    </div>

</div>

</body>
</html>

In this way we can drag and drop image. Now I want some modifications in this code- I want to drag drop image from one position to another but i want starting position of image fixed and can only drag drop copy of image to new position. Any help please!

I'd a similar problem with drag and drop on IE 9.

I saw this post in http://expressionengine.com/forums/viewthread/197212/#927837, and he propose to change a line at jquery-ui mouse module.

This change is commit at git repository jquery-ui, https://github.com/jquery/jquery-ui/commit/8fcf58e29e4adfdcf9bef5c9e35bde932c165aa8

I'm updated to jquery-ui 1.8.18, and I think it's fixed and I can run jquery drap and drop in IE 7,8,9. Maybe this will help you.

<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>

demonstration available on below link http://www.infinetsoft.com/Post/How-to-drag-and-drop-image-in-to-the-widget-using-jquery/1247#.V00Tt_l97IU