Making a MathML equation draggable with jQuery UI

Question

I was recently attempting to display math in HTML, and make it so that the equation I was displaying could be dragged around. For this purpose I used jQuery UI.

var div = $('<div id="equation">y = m * x + b</div>');
$("body").append(div);
div.draggable();

This worked fine.

I then decided to use MathJax with MathML to render my equations instead, so this became

var div = $('<math xmlns="http://www.w3.org/1998/Math/MathML" id="equation"><mi>y</mi><mo>=</mo><mi>m</mi><mo>*</mo><mi>x</mi><mo>+</mo><mi>b</mi></math>');
$("body").append(div);
div.draggable();

This does not work fine.

Instead, I get an error:

Uncaught TypeError: Cannot use 'in' operator to search for 'position' in null 

I'm unsure why I am getting this error, so any guidance would be immensely helpful. I'd very much like to get my equation draggable, and switching to MathML is the only thing I changed.

Answer 1

It looks like jQuery parses the div when .draggable() is called, and this is causing an error.

One solution is to add the MathML after the draggable is created:

var div = $('<div id="equation">y = m * x + b</div>');
$("body").append(div);
div.css('cursor','move');
div.draggable();
div.html('<math xmlns="http://www.w3.org/1998/Math/MathML" id="equation"><mi>y</mi><mo>=</mo><mi>m</mi><mo>*</mo><mi>x</mi><mo>+</mo><mi>b</mi></math>');

jsfiddle: http://jsfiddle.net/7v8wQ/5/ . This kinda feels like a hack, but it works, and it's a lot easier than hacking the jquery code.