如何使用JQuery在一个盒子中定位MathJax元素?

时间:2016-07-27 03:38:40

标签: javascript jquery css

我试图将MathJax元素放在一个盒子里。我尝试了几种不同的方法但没有工作。框本身已定位,但我希望附加到框中的元素位于同一个框(#third)中。到目前为止,代码实际上移动了整个第三个框而不是附加到第三个框的元素。这是Javascript / JQuery代码。可以通过以下链接查看完整代码:MathJax Code

function drop(ev){

ev.preventDefault();
var data = ev.dataTransfer.getData("text");

//ev.target.appendChild(document.getElementById(data));

switch(data)
{
       case("drag1"):

         $('#second').append('$$\\sum$$');
         break;

   case("drag2"):

     $('#second').append('$$\\int$$');
         break;

       case("drag3"):

     $('#second').append('$$\\alpha$$');
         break;

       case("drag4"):

     //$('#second').css("font-size","150%");
         $('#second').append('$$\\beta$$').css("font-size","150%");
         break;

        case("drag5"):

         $('#second').append('$${du}$$');
         break;

        case("drag6"):

         $('#second').append('$${dt}$$');
         break;

        case("drag7"):

         $('#second').append('$${t}$$');
         break;


       case("drag8"):



          //$('#second').append('$$\\beta$$').css("font-size","150%");
          //var $sqrtEqElement = $('#third').append('$${t}^x\\sqrt{t}^x$$').css("font-size","100%"); 
          //var $sqrtEqElement = document.createElement("$${t}^x\\sqrt{t}^x$$");
          //$('#sqrtEqElement').parent().css({position: 'absolute'});
          //$('#sqrtEqElement').css( { position: 'absolute', top: 0, left: 0} );

          $('#second').append('$${t}^x\\sqrt{t}^x$$');
          $('#container').append('<div id="third" ondrop="drop(event)" ondragover="allowDrop(event)"></div>');

          $('#third').append('$${t}^x\\sqrt{t}^x$$').css( { position: 'absolute', top: 10, left: 100} ); //not working

          //$('#third').append('<label>Filename:</label> <input type="text" name="file"  id="file" />');

          break;

       default:
    }
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,"second"]);
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,"third"]);

}

1 个答案:

答案 0 :(得分:0)

您是否尝试过以下操作:

  var text = '<span style="position:absolute; top: 10px; left: 100px;">$${t}^x\\sqrt{t}^x$$</span>';
  $('#third').append(text);