php - div内のマウスカーソルの位置を検出する方法

Question

幅が100ピクセルの長方形のスパンがあり、ユーザーに0〜100％の範囲で選択してもらいたい。

幅に沿ってdivをクリックすると、その値が保存され、ajaxを使用してすぐにユーザーに表示されます。したがって、divの真ん中でクリックすると、節約される値は50％になります。

私はこれを行うためのエレガントな方法を考えることはできません！任意のヒント？

Answer 1

<input type="range"/>と組み合わせて使用​​することを検討してください<span>

-編集-

コメントに応えて、このプラグインを介してFirefoxのフォールバックサポートを追加しました

Updated Demo Fiddle with Polyfill : http://jsfiddle.net/V3ygq/2/

デモフィドル： http： //jsfiddle.net/V3ygq/

HTML

範囲を幅100ピクセルの内側に配置します<span>。

<div id="console">...</div>
<span id="container">
     <input id="myRange" type="range" min="0" max="100" />
</span>

jQuery

で、値を使用して何かchange()を実行します。

$(function () {
    $("#myRange").on('change', function () {
        // Pull out value, set html of #console DIV
        $("#console").html($(this).val());
    });
    // Set initial value of #console
    $("#myRange").trigger('change');
});

CSS

で範囲セレクターを非<span>表示にしますが、クリックしてその値を変更できるようにします

#container {
    width: 100px;
    background: #333;
}
#container input {
    opacity: 0;
}