jquery:拖放小部件

Question

我正在尝试创建UI，其中左侧面板由窗口小部件组成，我们可以拖动窗口小部件到左侧工作区，以创建我们想要的UI，然后使用它。

我假设，这可以通过jquery来实现。如果没有，你能给我推荐另一种方法吗？

我的起始级代码是：

<!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() {
    $( "#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>

这样我们就可以拖放图像了。现在我想要在这段代码中进行一些修改-我想要将拖放图像从一个位置拖到另一个位置，但我希望图像的起始位置固定，并且只能将图像的拖放副本拖到新位置。有什么需要帮忙的吗？

Answer 1

我在IE 9上也遇到了类似的拖放问题。

我在http://expressionengine.com/forums/viewthread/197212/#927837上看到了这篇文章，他建议在jquery-ui鼠标模块中更改一行。

此更改提交到git存储库jquery-ui、https://github.com/jquery/jquery-ui/commit/8fcf58e29e4adfdcf9bef5c9e35bde932c165aa8

我更新到了jquery-ui 1.8.18，我想它已经修复了，我可以在IE7，8，9中运行jquery drop和drop，也许这会对你有所帮助。

Answer 2

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

以下链接http://www.infinetsoft.com/Post/How-to-drag-and-drop-image-in-to-the-widget-using-jquery/1247#.V00Tt_l97IU上提供了演示