jQuery zmieniające CSS wewnątrz zagnieżdżonego wywołania funkcji

Question

Obecnie próbuję stworzyć element przeciągnij i upuść, który pozwoli mi przenieść element, do którego jest dołączony. Wszystko powstaje dynamicznie. Mam powtarzający się problem, w którym nie mogę zmienić css z wewnątrz wywołania funkcji zagnieżdżonej.

jQuery (nie działa)

//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;
});

Napisałem funkcję w JavaScript, która działa poprawnie, jednak próbuję ją przekonwertować do jQuery. Oto działająca funkcja JavaScript:

JavaScript (działający)

        //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;
    }

Czy możesz wskazać, gdzie robię źle i czy przyjmuję złe podejście. Dziękuję.

jquery css nested-function

3

Jack 8 sierpień 2011, 02:14

Answer 1

Ok, odkryłem, że aby zastąpić istniejący styl, muszę wykonać następujące czynności...

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

Usunięcie atrybutu stylu i ponowne zastosowanie wydaje się działać dobrze.

0

Jack 18 sierpień 2011, 15:02

Answer 2

Myślę, że jest kilka powodów, dla których to nie działa. Przede wszystkim, gdy używasz selektora jQuery, nie musisz wstawiać pełnego tagu, takiego jak $('<span>'), ale raczej jak $('span'), aby wybrać określony element. Dla klas to $('.class'), a dla id $('#id').

Aby faktycznie stworzyć element i dołączyć go do ciała, zmień

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

W

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

Ponadto, po dostosowaniu tego, wydaje się, że idzie na południe, gdy wywołujesz współrzędne wskaźnika myszy. Funkcja mousemove jQuery udostępnia również niektóre dane zdarzeń, które można łatwo wykorzystać, aby uzyskać potrzebne współrzędne, na przykład:

.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

Ciężko jest Ci pomóc bez przykładu HTML i CSS, ale myślę, że to zdecydowanie powinno Cię naprowadzić.

-1

Joey 8 sierpień 2011, 03:16

Jeśli spojrzysz na odpowiednik JavaScript, zobaczysz, że OP tworzy nowy element.

–

Bertrand Marron

8 sierpień 2011, 03:07

jQuery zmieniające CSS wewnątrz zagnieżdżonego wywołania funkcji

2 odpowiedzi

Podobne pytania

Nowe pytania

jquery