Question

考虑我有两个面板的场景

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

- ＆GT; Div-2我有多个asp.net面板，如6-8。

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

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

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

Answer 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
       }
       });

希望有所帮助

Answer 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

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

3 个答案: