拖放圖像從一個面板到另一個asp.net + jquery的

考慮一個情形，其中i具有兩個面板拖放圖像從一個面板到另一個asp.net + jquery的

- > DIV-1 I具有從文件系統加載個體圖像

- > Div-2我有6-8個多個asp.net面板。

我需要將Div-1中的圖像拖放到Div-2中，並使用下面的功能。

我需要從Div-1拖動單個圖像到Div-2中的面板。將圖像放入面板後，如果需要，用戶應該可以將圖像移動到任何其他面板，如果他認爲自己拖放了錯誤的圖像，他應該可以移除圖像以便可以放入圖像回到左側面板上。

來源

2014-09-22 user1234

http://jsfiddle.net/1xnmtyqs/13/退房 – Sam1604 2014-09-22 08:40:14

試試這個：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Droppable - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <style> 
    #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } 
    #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } 
    </style> 
    <script> 
    $(function() { 
    $("#draggable").draggable(); 
    $("#droppable").droppable({ 
     drop: function(event, ui) { 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
      .html("Dropped!"); 
     } 
    }); 
    }); 
    </script> 
</head> 
<body> 

<div id="draggable" class="ui-widget-content"> 
    <p>Drag me to my target</p> 
</div> 

<div id="droppable" class="ui-widget-header"> 
    <p>Drop here</p> 
</div> 


</body> 
</html>

來源：看看這個http://jqueryui.com/droppable/

來源

2014-09-22 08:50:39 coder

您可以實現所需的用** jQuery UI的可拖動** API的解決方案。它支持您可以check here

使用下面的代碼，通過可拖動

 $("#draggable").draggable({ 
     start: function() { 
      // your logic 
     }, 
     drag: function() { 
       // your logic 
     }, 
     stop: function() { 
      // your logic 
     } 
     });

提供

$(document).ready(function(){ 
     $("#draggable").draggable(); 
    });

事件事件希望它可以幫助

來源

2014-09-22 08:51:37 Mayank

檢查這個例子： -

<style type="text/css"> 
     body 
     { 
      font-family: Arial; 
      font-size: 10pt; 
     } 
     img 
     { 
      height: 100px; 
      width: 100px; 
     } 
     #dvDest 
     { 
      border: 5px solid #ccc; 
      padding:5px; 
      height: 100px; 
      width: 200px; 
     } 
    </style> 

    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script> 
    <link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" /> 
    <script type="text/javascript"> 
     $(function() { 
      $("#dvSource img").draggable({ 
       drag: function (event, ui) { 
        ui.helper.css("opacity", "0.7"); 
       } 
      }); 
      $("#dvDest").droppable({ 
       drop: function (event, ui) { 
        if ($("#dvDest img").length == 0) { 
         $("#dvDest").html(""); 
        } 
        ui.draggable.css("position", "static"); 
        ui.draggable.css("opacity", "1"); 
        $("#dvDest").append(ui.draggable); 
       } 
      }); 
     }); 
    </script> 
    <div id="dvSource"> 
     <img alt="" src="Your Images path" /> 
     <img alt="" src="Your Images path" /> 
    </div> 
    <hr /> 
    <div id="dvDest"> 
     Drop here 
    </div>

Example

來源

2014-09-22 09:54:25

我該怎麼辦相同的，如果可以說在dvSource每個圖像我在dvDest即多個div的相應的div在我的目的地 – user1234 2014-09-22 10:34:46

拖放圖像從一個面板到另一個asp.net + jquery的

回答

相關問題