Я использую перетаскиваемый для перетаскивания значков на div.Я могу поставить значки на div и перетащить их легко.Но я не знаю, как мне добиться функциональности «Scribble» (то есть, используя мышь, как перо, чтобы рисовать линии на 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>
Если есть какой-либо способ достичь функциональности, подобной краске (рисование линий с помощью мыши) с помощью dragggable .