个人中心
gpt4 book ai didi

javascript - 多元素拖动、调整大小、旋转和删除

转载 作者：行者123 更新时间：2023-11-30 05:38:04 25 4
gpt4 key购买 nike

我想创建一个简单的“让我们构建一个外观”工具，它基本上允许用户将一个 div(里面有一个图像)拖到目标区域，调整它的大小，旋转它或删除它并执行相同的操作其他几个元素。

我可以为所有元素创建拖动部分，也可以调整一个元素的大小，但不能做多个。

这是我所拥有的(我从 Stackoverflow 中的示例中复制了部分代码):

   $(document).ready(function() {
      //Counter
      counts = [0];

      $(".closeMe").hide();

      $(".dragImg").draggable({
        revert: "invalid",
        containment: "#droppable",
        helper: "clone",
        cursor: "move",
        start: function(event, ui) {
                counts[0]++;
                isDraggingMedia = true;
        },
        stop: function(event, ui) {
            isDraggingMedia = false;
        }
      });

      $("#droppable").droppable({
        accept: ".dragImg",
        drop: function(e, ui){
            if(ui.draggable.hasClass("dragImg"))
                 $(this).append($(ui.helper).clone());
            //Pointing to the dragImg class in dropHere and add new class.
            $("#droppable .dragImg").addClass("item-"+counts[0]);
            //Remove the current class (ui-draggable and dragImg)
            $("#droppable .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging");       

            $("#droppable .item-"+counts[0]+" .closeMe").addClass("del-"+counts[0]);


            $(".item-"+counts[0]).click(function(){
                $(".item-"+counts[0]+" .closeMe").show();
                //$(".item-"+counts[0]).attr('class', 'ui-draggable-helper');
                $(".item-"+counts[0]+" img").resizable({
                    aspectRatio: true
                });

            });   

            make_draggable($(".item-"+counts[0]));              
        }
      });

      var zIndex = 0;
      function make_draggable(elements){   
            elements.draggable({
                containment:'#droppable',
                start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
                stop:function(e,ui){}
            });
      }

  });

我无法做到的是调整每个元素的大小，甚至找不到合适的方法来旋转或删除它们。

我想单击以选择并显示允许调整大小、旋转和选择的句柄，而且当在元素外部单击时，句柄应该消失。

我该怎么做？

最佳答案

由于未提供 HTML，因此很难准确回答问题，但我创建了一个实现这些功能(拖放、删除和调整大小)的小型示例页面。删除使用可放置的“垃圾桶”div，您可能希望在元素内实现类似于拖动和调整大小的删除功能。

由于 jQuery UI 本身不提供旋转功能，因此我将其排除在外。有几个插件提供这种功能，所以你应该决定哪个最适合你。 CSS3 中也提供旋转，但您应该记住，这种方法很可能存在一些浏览器兼容性问题，有关更多信息，请参见 http://caniuse.com/transforms2d .

编辑:添加了指向具有此功能的极简演示应用程序的链接:https://github.com/relicode/dragdrop-minimalistic/ 

<!doctype html>

<head>
    <meta charset='utf-8'>
    <title>jQuery draggable / droppable test</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
    <style>

        .drop-hover {
            border: solid green 3px;
        }

        .handle {
            display: none;
        }

        .move-handle {
            cursor: move;
        }

        .rotate-handle {
            cursor: pointer;
        }

        .resize-handle {
            cursor: nwse-resize;
        }

        .trash {
            background-color: silver;
            display: table-cell;
            height: 100px;
            vertical-align: middle;
            width: 100px;
        }

        div.area {
            border: solid black 1px;
            float: left;
            height: 500px;
            width: 300px;
        }

        div.interactable {
            background-color: silver;
            height: 100px;
            position: relative;
            width: 100px;
        }

        div.interactable-tools {
            bottom: 0;
            position: absolute;
            width: 100%;
        }

        p {
            text-align: center;
        }

    </style>
</head>

<body>

    <div id='target-area' class='area'>
        <p>target</p>
        <div class='trash' id='trash'>Trash</div>
    </div>
    <div id='source-area' class='area'>
        <p>source</p>
        <div class='interactable'>
            Draggable 1
            <div class='interactable-tools'>
                <span class='handle move-handle'>Mo</span>
                <span class='handle rotate-handle'>Ro</span>
                <!-- <span class='handle resize-handle'>Re</span> -->
            </div>
        </div>

        <div class='interactable'>
            Draggable 2
            <div class='interactable-tools'>
                <span class='handle move-handle'>Mo</span>
                <span class='handle rotate-handle'>Ro</span>
                <!-- <span class='handle resize-handle'>Re</span> -->
            </div>
        </div>

        <div class='interactable'>
            Draggable 3
            <div class='interactable-tools'>
                <span class='handle move-handle'>Mo</span>
                <span class='handle rotate-handle'>Ro</span>
                <!-- <span class='handle resize-handle'>Re</span> -->
            </div>
        </div>
    </div>

    <script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script>
        $(document).ready(function() {

            var counts = 0; // make sure you use var before your variable name to prevent declaring it as a global variable

            $('.interactable')
                .resizable()
                .draggable({
                    handle: '.move-handle'
                })
                .hover(function() {
                    $(this).find('.handle').toggle();
                }, function() {
                    $(this).find('.handle').toggle();
                });
            ;

            $('#target-area').droppable({
                drop: function(ev) {
                    counts += 1;
                }
            });

            $('#trash').droppable({
                accept: '.interactable',
                drop: function(ev) {
                    $(ev.toElement).parent().parent().remove();
                },
                hoverClass: 'drop-hover'
            });

        });
    </script>

</body>

关于javascript - 多元素拖动、调整大小、旋转和删除，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22384227/

25 4 0
文章推荐： javascript - 使用 Semantic-UI 的最低 JQuery 版本是多少
文章推荐： javascript - 如何为这个脚本 jquery 绑定(bind)关闭事件
文章推荐： javascript - 重构 AngularJS 代码 - 提取函数
文章推荐： javascript - jQuery/Isotope 复杂的 AND/OR 过滤
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com