Javascript jquery：拖放小部件_Javascript_Jquery

Javascript jquery：拖放小部件

javascript jquery

Javascript jquery：拖放小部件,javascript,jquery,Javascript,Jquery,我正在尝试创建一个UI，其中左侧面板由小部件组成，我们可以将小部件拖放到左侧工作区，以便根据需要创建UI，然后使用它我想，这在jquery中是可能的。如果没有，你能建议我另一种方法吗我的起始级别代码是： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="

我正在尝试创建一个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>


#可拖动{宽度：50px；高度：50px；填充：0.5em；}
$（函数（）{
$（“#可拖动”）.draggable（）；
});

这样我们就可以拖放图像了。现在我想在这段代码中做一些修改-我想把图像从一个位置拖到另一个位置，但我想固定图像的起始位置，并且只能将图像的副本拖到新位置。请帮忙

对于IE 9上的拖放操作，我也有类似的问题

我在中看到这篇文章，他建议在jQueryUI鼠标模块上更改一行

此更改在git repository jquery ui上提交

我已经更新到jQueryUI1.8.18，我认为它已经修复，我可以在IE7,8,9中运行jQueryDRAP和drop。也许这会对你有所帮助。


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

将图像拖放到jQuery中的小部件
$（文档）.ready（函数（$）{
$（“.target”）.css（{opacity:“0.4”}）；
$（“#拖动”）.draggable（{zIndex:3}）；
$（“.target”）.dropable({
drop:dropCallback，
贪婪：是的
});
函数dropCallback（e）{
var消息=$（“”{
id:“消息”，
文本：“您已进入“+e.target.id+”面板”
});
$（“#状态”）.empty（）.append（消息）；
}
});
#拖{
宽度：114px；
高度：114px；
边缘底部：5px；
光标：移动；
背景：url(http://www.infinetsoft.com/Uploads/20160523103730logosmall.png)不重复；
浮动：左；
}
#外{
宽度：500px；
高度：300px；
边框：1px实心#D0C4C4；
浮动：对；
背景色：#FF5722；
}
#内在的{
宽度：100px；
高度：100px；
边框：3倍实心#000；
位置：相对位置；
顶部：100px；
左：200px；
背景色：#FFFF99；
}
#地位{
宽度：500px；
边框：1px实心#D0C4C4；
浮动：对；
清楚:对,；
颜色：#AD2525；
高度：40px；
字体大小：30px；
}
#信息{
边际：0px；
字号：80%；
}
将图像拖放到小部件中

下面的链接提供了演示

这里有很多易于理解的示例：您看过jquery.ui的可拖动小部件演示了吗？看了文档后，您到底有什么问题？提示：您正在寻找

帮助程序

选项。