Question

我正在使用可拖动在div上拖放图标。我可以将图标放在div上并轻松拖动它们。但是我不知道该如何实现“乱涂乱画”功能（例如，使用笔之类的鼠标在div上绘制线条，就像在画布上一样）。

以下是我尝试使用的示例代码：

    <!DOCTYPE html>
    <html>
    <head>
    <style>

              .dragContainer, .dragContainer2 {
                width:1100px;
                height:600px;            
                border: solid 1px green;
              }
    </style>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("p").click(function () {
                $(this).hide();
            });
        });
        function AddIcon(lnk) {
            var icon = '<div class="draggable cross" class="ui-widget-content" style="position:absolute;">' +
                '<a href="#" onclick="CloseMe(this); return false;">X</a>' +
              '<p class="croxx"><img src="' + $(lnk).attr("data-icon-path") + '" alt="' + $(lnk).attr("data-icon-name") + '"/></p>' +
            '</div>';
            $(".dragContainer").append(icon);
            $(".draggable").draggable({
                scroll: false
            });
        }
    </script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    </head>
    <body>

    <a title="test1" href="#" onclick="AddIcon(this); return false;" data-icon-path="https://cdn1.iconfinder.com/data/icons/Vista-Inspirate_1.0/64x64/apps/demo.png"><img src="https://cdn1.iconfinder.com/data/icons/Vista-Inspirate_1.0/64x64/apps/demo.png" alt="" /></a>

      <div class="dragContainer"> </div>

    </body>
    </html>

是否可以通过可拖动来实现类似绘画的功能（用鼠标画线）。

在div上画线

0 个答案: