0

Here's my code, I try to make a dialog box draggable, and the button on it loses its :active functionality. I added the 'handle' option to draggable, didn't work. What am I doing wrong?

function Alert(text){
    var $Alert = $('<div/>').attr('id', 'Alert');
    $('body').append($Alert);
    
    $Alert.draggable({handle:"#Alert"});
    
    $Alert.append($('<div/>').attr('id', 'AlertText').text(text));
    $Alert.append($('<br/>'));
    $Alert.append($('<div/>').attr('id', 'AlertButton').text('OK'));
    
    $('#AlertButton').click(function(){
        $Alert.remove();
    });
}
Improve this question
4
  • If you don't feel like wrestling with this stuff, it sounds like you could just use jQuery UI's dialog. Don't let me discourage you from figuring this out though... Commented Sep 13, 2012 at 14:48
  • when you say your :active code doesn't work, do you mean that the button isn't picking up some :active css style that you have set? Please clarify... Commented Sep 13, 2012 at 14:59
  • $Alert.append() will still return $Alert, thus you've been resetting the ID attribute each time. Instead use $().appendTo($Alert) Commented Sep 13, 2012 at 16:20
  • I have found a solution, but I'm curious about your answer - Raybies. For all I know $container.append($element); and $element.appendTo($container); shoud do the same thing, can you explain your meaning a little more? Commented Sep 14, 2012 at 10:49

2 Answers 2

Reset to default
0

Wait... what are you selecting with $('<div/>') ? Maybe you should use a div ID or class ;)

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

this: $('<div/>'); is the syntax for creating a new 'div', not selecting one. This code produces a dialog box from nothing, it inserts new divs and applies classes and id's to them to get the styling done.
why don't you use (only for appending) $('whereIneedToAppend').append($('<div id="myId">' +text +'<div/>'). You can write less code
Dude, I posted all the code here. Does it look a lot to you? ;)
0

Sorry guys, I am new so I couldn't answer myself at the time. I tried to post a comment but apparently it didn't show. I have found the answer myself, and stackoverflow.com is nice enough to even save the answer for me, so here it is: Though I searched google and StackOverflow a lot before posting, I found the answer here. Jquery Draggable UI overrides normal browser behavior for HTML elements inside draggable-enabled div

You can disable dragging from the inner like this:

$("#popup div").bind('mousedown mouseup', function(e) {
  e.stopPropagation();
});

event.stopPrpagation() stops a click on that inner from bubbling up to the outer that has the drag events bound to it. Since the event will never get there, those drag event handlers won't interfere. You can run this code before or after creating the draggable, it'll work either way.

here's my current code in case it helps someone:

function Alert(text){
    var $Alert = $('<div/>').attr('id', 'Alert');
    $('body').append($Alert);

    /*optional, requires jQuery ui .draggable()*/
    $Alert.draggable({handle:"#Alert"});

    $Alert.append($('<div/>').attr('id', 'AlertText').text(text));
    $Alert.append($('<br/>'));
    $Alert.append($('<div/>').attr('id', 'AlertButton').text('OK'));

    $("#AlertButton").bind('mousedown mouseup', function(e) {
        e.stopPropagation();
    });

    $('#AlertButton').click(function(){
        $Alert.remove();
    });
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.