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

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

考虑我有两个面板的场景

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

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

我需要使用以下功能将图像从 Div-1 拖放到 Div-2 中。

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

最佳答案

试试这个:

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

关于jquery - 在 asp.net+jquery 中将图像从一个面板拖放到另一个面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25969730/

相关文章:

javascript - 将位置绝对元素隐藏在位置相对父元素之外

angularjs - ng-if 在 ng-repeat 中不起作用

html - 如何在 div 中垂直对齐多个内联 block 元素? ( react )

javascript - HTML 表格单词问题

javascript - 如何在循环中添加上一个/下一个按钮?

css - 图片周围有三 Angular 形

html - 如何让 2 div 的文本沿底部对齐?

javascript - jQuery:如何等到 fadeTo(或任何其他效果)完成后再执行代码

jquery - 解析 JSON 字符串返回 null

javascript - 用于检查表单的 Jquery UI 对话框