为什么脚本不起作用？

Question

I tried to make an on-click div appear draggable div. 我试图使单击div出现可拖动的div。 Searched the right javascript in Google but when I copied it to my html then it does not work. 在Google中搜索了正确的javascript，但是当我将其复制到html时，它不起作用。 Could someone please explain why and how to fix it? 有人可以解释为什么以及如何解决吗？

<!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>

The CSS: 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`) */
}

The JS: 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;+

Answer 1

I found the + sign at the end of the last line. 我在最后一行的末尾找到了+号。 By removing it, I see it working as in the example below. 通过删除它，我可以看到它如以下示例所示工作。

document.onmouseup = _destroy;+

Here is the example: 这是示例：

 $('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>

Answer 2

Change this part: 更改此部分：

<link type="text/javascript"href="./Style.js" rel="stylesheet">

to 至

<script src='./Style.js' >

为什么脚本不起作用？

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-07-07 02:02:01

解决方案2
1 2016-07-07 02:54:54

为什么脚本不起作用？

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-07-07 02:02:01

解决方案2 1 2016-07-07 02:54:54

解决方案1
1 已采纳 2016-07-07 02:02:01

解决方案2
1 2016-07-07 02:54:54