0

純粋なJavaScriptに基づいて色を選択できるflexiカラーピッカースクリプトを見つけましたが、ドラッグして選択することはできず、パレットをクリックするだけです。

私は少し修正しました：

if (slideElement.attachEvent) {
    slideElement.attachEvent('onclick', slideListener(this, slideElement, pickerElement));
    pickerElement.attachEvent('onclick', pickerListener(this, pickerElement));
} else if (slideElement.addEventListener) {
    slideElement.addEventListener('click', slideListener(this, slideElement, pickerElement), false);
    pickerElement.addEventListener('click', pickerListener(this, pickerElement), false);
}

に

if (slideElement.attachEvent) {
    slideElement.attachEvent('onmouseup', slideListener(this, slideElement, pickerElement));
    slideElement.attachEvent('onmousedown', slideListener(this, slideElement, pickerElement));

    pickerElement.attachEvent('onmouseup', pickerListener(this, pickerElement));
    pickerElement.attachEvent('onmousedown', pickerListener(this, pickerElement));
} else if (slideElement.addEventListener) {
    slideElement.addEventListener('mouseup', slideListener(this, slideElement, pickerElement), false);
    slideElement.addEventListener('mousedown', slideListener(this, slideElement, pickerElement), false);

    pickerElement.addEventListener('mouseup', pickerListener(this, pickerElement), false);
    pickerElement.addEventListener('mousedown', pickerListener(this, pickerElement), false);
}

それは機能しますが、背景画像のドラッグを開始するのを2回以上実行した場合にのみページが読み込まれるときに機能しますが、それを修正する方法はありますか？

また、オプションとして、マウスボタンを押したままマウスをドラッグしながら色を変更することもできます。

http://jsfiddle.net/NkH3q/

4

1 に答える 1

1

こちらがhttp://jsfiddle.net/NkH3q/3/です。

（IE8 <では動作しません。テストするIEがないためですが、IEのハンドラーを複製でき、問題なく動作するはずです）。

説明。

あなたが求めているのは、マウスが下がっているときにだけピッカーを動かしたりドラッグしたりすることです。これを実現するには、マウスダウンでリスナーを追加する必要があります

Elem.addEventListener('mousedown', startDragging, false);

マウスアップイベントのリスナーはまだ追加されていないことに気づきましたが、現時点では追加しません。startDragging関数はフラグを設定するだけです

this.dragging = false;
var q = this; // cache this to use it in another function scope

var startDragging = function() {
  q.dragging = true;  
  document.addEventListener('mouseup', stopDragging , false);
};

すべてが非常に明確である必要があります。ドキュメントにmouseupリスナーを設定していることに気付くでしょう。これは、ユーザーがカーソルをカラーピッカーの外に移動した場合でも、クリックが離されたとき（マウスアップ）にイベントがキャッチされるようにするために行われます。

stopDragging関数がどのように見えるかを見てみましょう

    var stopDragging = function() {
      q.dragging = false;  
      document.removeEventListener('mouseup', stopDragging , false);
    };

ここでも、ドラッグフラグをfalseに設定し、ドキュメントで設定したマウスアップリスナーを削除します。結局、リスナーと一緒にmemmを散らかしたくありません。

そして今、mousemove関数

var pickerFunc = pickerListener(this, pickerElement ),
    slideFunc = slideListener(this, slideElement, pickerElement);

slideElement.addEventListener('mousemove', slideFunc, false);
pickerElement.addEventListener('mousemove',pickerFunc, false);

....
function pickerListener(ctx, pickerElement) {
    return function(evt) {
        if (!ctx.dragging)   
          return false;
.....

まず、pickerListener / slideListenerは関数を返すため、毎回同じ引数を使用すれば、それらを複数回呼び出す必要はありません。機能が重複してしまうからです。したがって、それを一度実行してキャッシュする方がはるかに優れています（slideFunc / pickerFunc vars）

次に、これらの関数の最初に、ドラッグフラグのチェックを追加します。falseに設定されている場合、何もしません。

物事が選択されて「ドラッグ」コントロールが台無しになるのを防ぐために、追加する必要があります

-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none; 
-ms-user-select: none;
user-select: none;

ラッパー要素で。古いバージョンのIE（7,8,9）およびOpera では、ラッパー要素にunselectable="on"属性が必要です。

于 2012-10-19T23:09:34.123 に答える