在web应用程序ASP.net中拖放和移动图像

Drag, Drop and move Image within web application ASP.net

本文关键字：拖放 移动 图像 net web 应用程序 ASP      更新时间：2024-06-14

我的要求是

  1. 从列表中拖动图像并将其放入新的Div（ImgContainer）中。原始图像应仍在图像列表中
  1. 丢弃的图像应该能够在Div（ImgContainer）中移动

帮我做这个。这就是我所做的。我使用了ASP.net和1.9.2（Legacy，用于jQuery1.6+

<script>
        $(function () {
            $("#Item1").draggable({
                containment: "#ImgContainer",
                cursor: 'move',
                appendTo: "#ImgContainer",
                helper: "clone"
            });
        });
        $(function () {
            ImgContainer.droppable({
                accept: "#gallery > li",
                activeClass: "ui-state-highlight",
                drop: function (event, ui) {
                    $("img").clone(ui.draggable.clone()).appendTo(this);
                }
            });
        });
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="form1" runat="server">
            <div class="ui-widget ui-helper-clearfix">
                <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix" style="width:400px; float:left !important">
                    <li class="ui-widget-content ui-corner-tr">
                        <img id="Item1" src="https://cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/home-128.png" alt="The peaks of High Tatras" />
                    </li>
                </ul>
                <br />
                <div id="ImgContainer" class="ui-widget-content ui-state-default" style="width:600px; height:500px" ondrop="drop(event)">
                    <h4 class="ui-widget-header"><span class="ui-icon ui-icon-ImgContainer">ImgContainer</span></h4>
                </div>
            </div>
        </form>

您的代码很好，除了5件事：

  • draggble/doppable是jquery UI方法。先把它也包括在内。

  • 如果在一个普通的javascript项ImgContainer上调用droptable，则需要首先使用jQuery选择它：$("#ImgContainer")

  • 您在图像中调用draggable，而不是在列表项上，但您只接受droptable中的列表项。将> img添加到accept属性。

  • 容器中的ondrop属性覆盖jquery dropapble drop。去掉它。

  • dropepd项目需要再次声明为可拖动，因为它们是原始的克隆

$(function () {
    $("#Item1").draggable({
        containment: "#ImgContainer",
        cursor: 'move',
        appendTo: "#ImgContainer",
        helper: "clone"
    });
});
$(function () {
    $("#ImgContainer").droppable({
        accept: "#gallery > li > img, #ImgContainer > img",
        activeClass: "ui-state-highlight",
        drop: function (event, ui) {
            ui.draggable.clone().appendTo(this).draggable({
                containment: "#ImgContainer",
                cursor: 'move',
                appendTo: "#ImgContainer"
            });;
        }
    });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<form id="form1" runat="server">
    <div class="ui-widget ui-helper-clearfix">
        <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix" style="width:400px; float:left !important">
            <li class="ui-widget-content ui-corner-tr">
                <img id="Item1" src="https://cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/home-128.png" alt="The peaks of High Tatras" />
            </li>
        </ul>
        <br />
        <div id="ImgContainer" class="ui-widget-content ui-state-default" style="width:600px; height:500px">
             <h4 class="ui-widget-header"><span class="ui-icon ui-icon-ImgContainer">ImgContainer</span></h4>
        </div>
    </div>
</form>

我可以解决我的问题。谢谢大家，这是的解决方案

$(function () {
    $("#ImgContainer").droppable({
        accept: '.drag',
        drop: function (event, ui) {
            var $clone = ui.helper.clone();
            if (!$clone.is('.insideContainer')) {
                $(this).append($clone.addClass('insideContainer').draggable({
                    containment: '#ImgContainer'
                }));
            }
        }
    });
    $(".drag").draggable({
        helper: 'clone'
    });
});
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"/>
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<div class="ui-widget ui-helper-clearfix" style="float:left; background-color:white; height:500px; width:250px !important">
            <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix" style="width:250px; float:left !important">
                <li class="ui-widget-content ui-corner-tr">
                    <img id="Item1" class="drag" src="http://50.198.27.57:8081/imagesDoc/IPD/1.jpg" style="width:100px; height:100px !important;" alt="The peaks of High Tatras" />
                </li>            
            </ul>
</div>
<div id="ImgContainer" style="height:300px; width:300px; float:right; background-color:silver !important">
</div>

相关文章：