為什么腳本不起作用？
[英]Why does the script not work?
問題描述
我試圖使單擊div出現可拖動的div。 在Google中搜索了正確的javascript，但是當我將其復制到html時，它不起作用。 有人可以解釋為什么以及如何解決嗎？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript" src="script.js"></script>
<link type="text/css"href="./Style.css" rel="stylesheet">
<link type="text/javascript"href="./Style.js" rel="stylesheet">
</head>
<body>
<span class="about" id="but01">Click on me 1</span>
<span class="about" id="but02">Click on me 2</span>
<div id="s1" class="hidden" id="draggable-element">
<div id="draggable-element">Text here</div>
</div>
<div id="s2" class="hidden">2</div>
</body>
</html>
CSS：
body{
background-color: #101010;
color: #ff9900;
}
.hidden{
display:none;
}
[draggable=true] {
cursor: move;
}
#draggable-element {
width:100px;
height:100px;
background-color:#ff9900;
color:white;
padding:10px 12px;
cursor:move;
position:relative; /* important (all position that's not `static`) */
}
JS：
$('span[id^="but0"]').click(function(){
var id = $(this).attr('id').substr(4);
if($('#s' + id).is(':visible'))
$('#s' + id).hide();
else
$('#s' + id).show();
});
var selected = null, // Object of the element to be moved
x_pos = 0, y_pos = 0, // Stores x & y coordinates of the mouse pointer
x_elem = 0, y_elem = 0; // Stores top, left values (edge) of the element
// Will be called when user starts dragging an element
function _drag_init(elem) {
// Store the object of the element which needs to be moved
selected = elem;
x_elem = x_pos - selected.offsetLeft;
y_elem = y_pos - selected.offsetTop;
}
// Will be called when user dragging an element
function _move_elem(e) {
x_pos = document.all ? window.event.clientX : e.pageX;
y_pos = document.all ? window.event.clientY : e.pageY;
if (selected !== null) {
selected.style.left = (x_pos - x_elem) + 'px';
selected.style.top = (y_pos - y_elem) + 'px';
}
}
// Destroy the object when we are done
function _destroy() {
selected = null;
}
// Bind the functions...
document.getElementById('draggable-element').onmousedown = function () {
_drag_init(this);
return false;
};
document.onmousemove = _move_elem;
document.onmouseup = _destroy;+
2 個解決方案
解決方案1
1 已采納 2016-07-07 02:02:01
我在最后一行的末尾找到了+號。 通過刪除它，我可以看到它如以下示例所示工作。
document.onmouseup = _destroy;+
這是示例：
$('span[id^="but0"]').click(function() { var id = $(this).attr('id').substr(4); if ($('#s' + id).is(':visible')) $('#s' + id).hide(); else $('#s' + id).show(); }); var selected = null, // Object of the element to be moved x_pos = 0, y_pos = 0, // Stores x & y coordinates of the mouse pointer x_elem = 0, y_elem = 0; // Stores top, left values (edge) of the element // Will be called when user starts dragging an element function _drag_init(elem) { // Store the object of the element which needs to be moved selected = elem; x_elem = x_pos - selected.offsetLeft; y_elem = y_pos - selected.offsetTop; } // Will be called when user dragging an element function _move_elem(e) { x_pos = document.all ? window.event.clientX : e.pageX; y_pos = document.all ? window.event.clientY : e.pageY; if (selected !== null) { selected.style.left = (x_pos - x_elem) + 'px'; selected.style.top = (y_pos - y_elem) + 'px'; } } // Destroy the object when we are done function _destroy() { selected = null; } // Bind the functions... document.getElementById('draggable-element').onmousedown = function() { _drag_init(this); return false; }; document.onmousemove = _move_elem; document.onmouseup = _destroy;
body { background-color: #101010; color: #ff9900; } .hidden { display: none; } [draggable=true] { cursor: move; } #draggable-element { width: 100px; height: 100px; background-color: #ff9900; color: white; padding: 10px 12px; cursor: move; position: relative; /* important (all position that's not `static`) */ }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> <span class="about" id="but01">Click on me 1</span> <span class="about" id="but02">Click on me 2</span> <div id="s1" class="hidden" id="draggable-element"> <div id="draggable-element">Text here</div> </div> <div id="s2" class="hidden">2</div>
解決方案2
1 2016-07-07 02:54:54
更改此部分：
<link type="text/javascript"href="./Style.js" rel="stylesheet">
至
<script src='./Style.js' >
為什么.live在此腳本中不起作用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.