Эта обновленная скрипка работает нормально, но есть одна проблема:
Если я хочу перетащить клона, клон сам клонирует, я не хочу, чтобы
Все, что мне нужно знать, это как сделать клон перетаскиваемым без клонирования себя.Я попытался удалить ui-helper из newClone, но не сработало.
Извините, что я поместил скрипт в HTML, я не смог заставить его работать другим способом
HTML / код JavaScript:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Facilty</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function(){
$('.resizer').draggable({
helper:function(){return $(this).clone().appendTo("body").css("zIndex",5).show()},
//^^this is provoking infinite clone each time a clone is dragged around^^
cursor:'move'
});
$('body').droppable({
accept: '.resizer',
tolerance: 'pointer',
drop: function(event, ui){
var newClone = $(ui.helper).clone();
$(this).after(newClone);
newClone.attr('id', 'rotate').draggable();
//^^infinite cloning due to this^^
}
});
});
var angle = 0;
var width = 100;
var height = 100;
$(document).keydown(function(event){
if(event.which == 109){ //substract key
angle-=5;
left();
};
if(event.which == 107){ //add Key
angle+=5;
right();
};
if(event.which == 40){ //DownArrow Key
height-=5;
smaller();
};
if(event.which == 38){ //UpArrow Key
height+=5;
bigger();
};
if(event.which == 37){ //LeftArrow Key
width-=5;
thinner();
};
if(event.which == 39){ //RightArrow Key
width+=5;
wider();
};
});
function left(){document.getElementById('rotate').style.transform = 'rotate('+angle+'deg)'};
function right(){document.getElementById('rotate').style.transform = 'rotate('+angle+'deg)'};
function smaller(){document.getElementById('rotate').style.height = height + 'px'};
function bigger(){document.getElementById('rotate').style.height = height + 'px'};
function wider(){document.getElementById('rotate').style.width = width + 'px'};
function thinner(){document.getElementById('rotate').style.width = width + 'px'};
/* Set the width of the sidebar to 250px (show it) */
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
}
/* Set the width of the sidebar to 0 (hide it) */
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
};
</script>
</head>
<body>
<button class="openbtn" onclick="openNav()">☰ Side Bar</button>
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="dropdown">Actions
<div class="dropdown-content">
<p class='resizer'>I can be dragged around, resized and I can even spin, but my clone can't rotate...</p>
<p id='rotate' class='resizer'>I can do everything EXCEPT rotate</p>
</div>
</div>
</div>
</body>
</html>
Код CSS:
/* The sidebar menu */
.sidebar {
height: 100%; /* Specify a height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 4; /* Stay over content */
top: 0;
right: 0;
background-color: #111; /* Black*/
overflow: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}
/* The sidebar links */
.sidebar .dropdown {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidebar .dropdown:hover {
color: #f1f1f1;
}
/* Position and style the close button (top left corner) */
.sidebar .closebtn {
position: absolute;
top: 0;
left: 0;
font-size: 36px;
margin-left: 25px;
color:white;
}
/* Style the button that is used to open the sidebar */
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
position:fixed;
margin-top:25px;
margin-right:25px;
top:0;
right:0;
}
.openbtn:hover {
background-color: #444;
}
.dropdown{
position:relative;
display:inline-block;
}
.dropdown-content{
display:none;
position:absolute;
background-color:#f1f1f1;
min-width:160px;
box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
z-index:4;
font-size:15px;
color:black;
}
.dropdown-content a{
color:black;
padding:24px 16px;
text-decoration:none;
display:block;
}
.dropdown-content a:hover{background-color:#ddd;}
.dropdown:hover .dropdown-content{display:block;}
.resizer{
width:100px;
height:100px;
border:1px solid black;
}
body{
border:1px solid black;
width:90%;
height:900px;
background-color:#900000;
}
p{
font-size:20px;
}