在asp.net + jquery中将图像从一个面板拖放到另一个面板答案

【问题标题】：drag and drop image from one panel to another in asp.net+jquery在asp.net + jquery中将图像从一个面板拖放到另一个面板
【发布时间】：2014-09-22 08:34:18
【问题描述】：

考虑一个我有两个面板的场景

-> Div-1 我有从文件系统加载的单个图像

-> Div-2 我有多个 asp.net 面板，例如 6-8。

我需要将图像从 Div-1 拖放到 Div-2，具有以下功能。

我需要将单个图像从 Div-1 拖到 Div-2 中的面板。将图像放入面板后，如果需要，用户应该能够将图像移动到任何其他面板，如果他认为他拖放了错误的图像，他应该能够删除图像以便可以放回到左侧面板上。

【问题讨论】：

jsfiddle.net/1xnmtyqs/13 退房

标签： jquery html css asp.net c#-4.0

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

您可以通过使用**jquery ui Draggable** api 来实现所需的解决方案。它支持你可以check here的事件

使用下面的代码作为

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

Draggable 提供的事件

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

希望对你有帮助

【讨论】：

【解决方案3】：

检查这个例子：-

<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

【讨论】：

如果假设 dvSource 中的每个图像我在 dvDest 中都有一个相应的 div 即我的目的地中有多个 div，我该怎么做呢