jquery中的浮动菜单工具栏

Question

我尝试创建像Aloha编辑器一样的浮动菜单,但它无法正常工作.任何人都可以帮助我在jquery中使用浮动菜单的基本示例.

我不是在寻找菜单浮动我需要在Aloha编辑器中浮动类似的工具栏

$(document).ready(function() {
            var fBox = $('#box');
              fBox.draggable();
              $(".columns").click(function(e){
                var mouseXPos = e.pageX;
                var mouseYPos = e.pageY;
                console.log("mouseXPos:"  + mouseXPos + "cleft:" +mouseYPos);
              fBox.animate({top:mouseYPos},1000);
              fBox.animate({left:mouseXPos},1000);
              });
            });

CSS

<style>
        #page{width:600px;margin:0 auto;}
        #page .columns{float:left;width:250px;}
        #box{   background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    left: 749px;
    opacity: 0.9;
    padding: 0 10px;
    position: absolute;
    top: 35px;
    width: 216px;}
        </style>

HTML

<div id="page">
            <div class="columns">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            </div>
            <div class="columns">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            </div>
            <div id="box">
                <h2>hello world</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
            </div>
        </div>

示例浮动工具栏http://elankeeran.com/manish/prototype/alohaEditor/

Answer 1

这里有一个教程：

使用 jQuery 和 CSS 创建浮动 HTML 菜单