0
我製作了一個小部件:在一個非常棒的單詞上彈出一個小部件,彈出一個菜單。拖到您的選擇,釋放。菜單打開。css&jQuery:點擊/拖拽改變尺寸的元素
窗口小部件功能正常,但點擊/拖動會使窗口元素更改大小並移動,這不是所需的行爲。 CSS非常簡單,所以我不知道從哪裏開始。
這裏是小提琴。 http://jsfiddle.net/monsto/JfWQ3/1/
這裏的CSS
body {margin:25px;}
li {cursor: pointer; display: inline-block; border:1px solid black; position:relative;height:20px;}
.del {display: none;background-color: red; width:50%; float:left;text-align:center;position:relative;}
.save {display: none;background-color: green;width:50%; float:right;text-align:center;position:relative;}
.word {display: inline-block;}
和一些HTML
<div id="taglist">
<br /><hr />
Quisque ut felis urna, eget rutrum odio. Proin sed augue at
<li>
<span class="word">enim consectetur</span>
<div class="del">+</div>
<div class="save">-</div>
</li>
Ut interdum erat at neque egestas sagittis sed non massa. Nullam nec nulla quis purus convallis venenatis. Vivamus a pulvinar mauris. Quisque suscipit augue a felis suscipit ornare.
<li>
<span class="word">euismod.</span>
<div class="del">+</div>
<div class="save">-</div>
</li>
Aliquam eget quam sit amet lacus commodo malesuada.
<li>
<span class="word">Etiam</span>
<div class="del">+</div>
<div class="save">-</div>
</li>
Ut interdum erat
<li>
<span class="word">eget</span>
<div class="del">+</div>
<div class="save">-</div>
</li>
leo in turpis congue porta vel non nisl. Mauris ipsum erat, pellentesque at ullamcorper at, egestas ac enim. Aliquam fringilla mollis porttitor. In tempor pretium gravida.
<hr /><br />
</div>
呃。 。 。每次都有我的位置。 gj和謝謝。 – monsto 2012-04-19 04:42:33