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 repository jquery-ui，https://github.com/jquery/jquery-ui/commit/8fcf58e29e4adfdcf9bef5c9e35bde932c165aa8

中提交的

我已更新到jquery-ui 1.8.18，我认为它已修复，我可以在IE 7,8,9中运行jquery drap和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

上找到

jquery：拖放小部件

2 个答案: