Question

我的要求是

从列表中拖动图像并将其放入新的Div（ImgContainer）。原始图像应该仍然在图像列表中。

丢弃的图像应该能够在该Div（ImgContainer）中移动。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

draggble / droppable是jquery UI方法。首先包括它。
您正在调用普通javascript项ImgContainer上的droppable，您需要先使用jQuery选择它：$("#ImgContainer")
您正在调用图像中的可拖动，而不是列表项，但您只接受可放置的列表项。在accept属性中添加> img。
容器中的ondrop属性会覆盖jquery dropapble drop。摆脱它。
dropepd项目需要再次声明为draggable，因为它们是原始克隆

＆＃13;

$(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"
            });;
        }
    });
});

＆＃13;

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

＆＃13;

Answer 2

我能够解决我的问题。谢谢大家，这是解决方案

＆＃13;

$(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'
    });
});

＆＃13;

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

＆＃13;

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

2 个答案: