3

現在、添付されている要素を移動できるドラッグ アンド ドロップ要素を作成しようとしています。すべてが動的に作成されています。ネストされた関数呼び出し内から css を変更できないという問題が繰り返し発生しています。

jQuery (動かない)

//Drag begin     
var dragX;
var dragY;
var mouseDown = false;
var dragIcon = $('<span>')
.css({
    'z-index' : '11',
    'position' : 'absolute',
    'width' : '300px',
    'height' : '140px',
    'left' : '0px',
    'top' : '20px'
})

.addClass('unselectable')

.mousedown(function(){
    mouseDown = true;
    $(this).mousemove(function(){
        if(mouseDown == true){
            var dragX = getCurrentMouseX();
            var dragY = getCurrentMouseY();

            //Don't allow ideas to be created too close to the border of the page
            if(dragX < 260){
                dragX = 260;
            }else if(dragX > window.innerWidth - 260){
                dragX = window.innerWidth - 260;
            }    

            if(dragY < 160){
                dragY = 160;
            } else if(dragY > window.innerHeight - 450){
                dragY = window.innerHeight - 450;
            }

            $(this).css({
                'left' : dragX - 150,
                'top' : dragY - 81
            });
        }                
    })
})

.mouseout(function(){
    mouseDown = false;
})
.mouseup(function(){
     mouseDown = false;
});

私は正しく動作する JavaScript で関数を書きましたが、それを jQuery に変換しようとしています。以下は、機能する JavaScript 関数です。

JavaScript (動作中)

        //Drag begin     
    var dragX;
    var dragY;
    var mouseDown = false;

    //TODO: An icon which can be used to drag the cloud around
    var dragIcon = document.createElement('span');
    dragIcon.style.zIndex = "11";
    dragIcon.style.position = "absolute";
    dragIcon.style.width = "300px";
    dragIcon.style.height = "140px";   
    dragIcon.setAttribute('class', 'unselectable');
    dragIcon.style.left = "0px";
    dragIcon.style.top = "20px";
    dragIcon.unselectable = "on";
    dragIcon.style.MozUserSelect = "none";

    dragIcon.onselectstart = function() {return false;}
    dragIcon.onmousedown = function(){
        mouseDown = true;
        dragIcon.onmousemove = function(){
            if(mouseDown == true){
                var dragX = getCurrentMouseX();
                var dragY = getCurrentMouseY();

                if(dragX < 260){
                    dragX = 260;
                }else if(dragX > window.innerWidth - 260){
                    dragX = window.innerWidth - 260;
                }    

                if(dragY < 160){
                    dragY = 160;
                } else if(dragY > window.innerHeight - 450){
                    dragY = window.innerHeight - 450;
                }                           
                cloudStyle.left = dragX  - 150 + "px"; //-150 to make up for the position of the drag icon
                sunRay.style.left = dragX - 220 + "px";
                cloudStyle.top = dragY - 81 + "px"; //-85 to make up for the positioning
                sunRay.style.top = dragY - 250 + "px"; 
            }
        }
    }

    dragIcon.onmouseout = function(){
        mouseDown = false;
    }
    dragIcon.onmouseup = function(){
        mouseDown = false;
    }

どこが間違っているのか、間違ったアプローチを取っているのかを指摘していただけますか。ありがとう。

4

2 に答える 2

0

OK、既存のスタイルを置き換えるには、次のことを行う必要があることがわかりました...

        item.removeAttr("style");            
        item.attr("style", "style goes here!");

style 属性を削除して再適用するとうまくいくようです。

于 2011-08-18T11:02:26.500 に答える
-1

うまくいかない原因はいくつかあると思います。まず第一に、jQuery セレクターを使用する場合、完全なタグを入力する必要はなく$('<span>')、$('span')特定の要素を選択する必要があります。クラスの場合$('.class')と id の場合$('#id')。

実際に要素を作成して本体に追加するには、次のように変更します。

// Rest of code
var test = $('<span>').css({
// etc.

の中へ

// Rest of code
var test = $('<span>').appendTo('body').css({
// etc.

また、それを調整したところ、マウスポインタの座標を呼び出すと南下しているように見えます。jQuery の mousemove 関数は、次のように、必要な座標を取得するために簡単に使用できるいくつかのイベントデータもリリースします。

.mousedown(function() {
    mouseDown = true;
    $(this).mousemove(function(e) {
        if (mouseDown == true) {
            var dragX = e.pageX;
            var dragY = e.pageY;

            // The rest of your original code

例として HTML と CSS を抜きにしてこれ以上の説明をするのは難しいですが、これは間違いなくあなたの役に立つと思います。

于 2011-08-07T22:57:18.897 に答える