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：拖放小部件

回答

相關問題