使用jQuery UI制作一个可拖动的MathML方程

Making a MathML equation draggable with jQuery UI

本文关键字：一个 拖动 方程 MathML UI jQuery 使用      更新时间：2023-09-26

我最近试图用HTML显示数学，并使其可以拖动我显示的方程。为此，我使用了jQuery UI。

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

这很好。

然后我决定使用MathJax和MathML来呈现我的方程，所以这变成了

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();

这不好用。

相反，我得到了一个错误：

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

我不确定为什么会出现这个错误，所以任何指导都会非常有帮助。我非常想让我的方程变得可拖动，而切换到MathML是我唯一改变的事情。

当调用.draggable()时，jQuery似乎解析了div，这导致了一个错误。

一种解决方案是在创建draggable之后添加MathML：

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/.这感觉有点像黑客攻击，但它很有效，而且比黑客攻击jquery代码容易得多。

相关文章：