jquery：拖放小部件

我试图创建UI，其中左侧面板由小部件组成，我们可以将拖放小部件拖放到左侧工作区以创建用户界面，然后使用它。jquery：拖放小部件

我认为，这是可能的与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>

这样，我们可以拖放图像。现在我想在这段代码中进行一些修改 - 我想拖放图像从一个位置到另一个位置，但我想要固定图像的起始位置，并且只能将图像拖放到新位置。请任何帮助！

来源

2011-09-16 singh

很多容易获得理解的例子在这里：http://jqueryui.com/demos/draggable/ – dioslaska

你看jquery.ui的演示，可拖动小工具？ http://jqueryui.com/demos/draggable/ – sinelaw

查看文档后，你究竟遇到了什么问题？提示：您正在寻找'helper'选项。 –

我倒是有类似的问题与拖放在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，我认为它是固定的，我可以运行的jQuery DRAP和IE 7,8下降，9。也许这会帮助你。

来源

2012-04-17 07:39:35

<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

来源

2016-05-31 04:42:00

jquery：拖放小部件

回答

相关问题