我在jQuery,.Net Ajax和普通的旧javascript中看到了很多可拖动div的实现.虽然它们都是新颖的,并且以不同的方式解决问题,但我从未理解这一点.
可拖动div的价值是多少？可拖动的div实现了什么用例？
有可拖动的div可以改善用户体验的地方,还是<blink>标签的web 2.0版本？
我使用jQuery网站上的.draggable()UI设置了一个可拖动的div.我的主容器div被设置为窗口的宽度和高度溢出:隐藏所以页面上永远不会有滚动条.我的问题是,当我开始将可拖动的div拖离页面时,它会使我的页面滚动(我不想要).这是我的代码:
html, body{
margin:0 auto;
overflow:hidden;
}
#container #date-box{
position:absolute;
cursor:pointer;
background:url(/img/EWI/login/date-box.png) no-repeat;
width:247px;
height:21px;
z-index:9999;
margin:40px 0 0 15px;
}
$("div#container div#date-box").draggable();
请帮忙!!!!
我怎样才能使收容成为细胞的一个子集.即省略标题行和最左列？
是否存在使用draggable优化我的html的现有方法？我有div,在这个div中我有近100-1000个元素,它是动态生成的.我注意到,当有超过300个可拖动元素时,代码运行的速度越来越慢.
我无法理解为什么这种情况会持续下去.
我有一些存储在数组中的单词:
$poolOne=array("sparkly","sporty","happy","confident","awesome","funny","awkward","mad","silly","dynamic",
"handsome","merry","horrid","funky","loud","chirpy","posh","clever","pretty","athletic");
对此数组的调用会选择四个随机字并将其输出到a中 <span>
<?php foreach (array_rand($poolOne, 4) as $key) {
echo "<span>".$poolOne[$key]."</span>";
}?>
为了生成一个新的随机四个单词集而不刷新页面,我使用了一个非常简单的AJAX调用,只重新加载该部分,并为您提供一组新的四个单词.
你可以在这里看到这个,页面加载div中的代码wordbank,然后当运行AJAX(onClick绿色按钮)时,它再次从一个名为的文件加载相同的PHPwordbank.php
http://francesca-designed.me/create-a-status/index.php
这是标准的AJAX调用,没什么特别之处:
function refreshWords()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("wordbank").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","wordbank.php",true);
xmlhttp.send();
}
这一切都很好,你可以在上面的链接上看到.
但是下一步,我想使用jQuery UI来实现拖放的单词.这一步的第一步是将spans我的每个单词都放在一个类中,draggable这样jQuery可以做到这一点.但这是我遇到问题的地方.
一旦我添加class="draggable"到PHP调用,整个事情就会中断.
为什么只是简单地为这个调用添加一个类名呢？
这里没有
echo …我知道如何使用Tkinter窗口删除边框overrideredirect,但每当我这样做时,窗口就会变得无法响应.我无法使用alt和拖动或任何其他方法移动它.
我想创建一个看起来像那些只是一个裸窗口的"riced"应用程序之一的应用程序,显然如果它只是在左上角没有响应,我就无法走得太远.那么,我该怎么做？
我想制作一些可拖动的DIV与jQuery'可拖动,但那些不应该是可拖动的,但只有在每个DIV顶部的一个小图标的帮助下,所以我只能移动它,如果我点击并拖动它DIV上方的图标,而不是每当我点击并拖动div时拖动.
提前致谢
我试图限制元素拖动像素的距离。我循环遍历每个子元素，将其添加到总和中，并尝试将左侧拖动限制为该数量。
我无法使用父包含，因为可拖动元素实际上并不需要父元素的边界，而是需要每个选项卡的计算宽度。
这是我到目前为止所得到的：
JavaScript
var maxMenuWidth = 0;
$('.tabName').each(function(index, el) {
var menuWidth = $(this).outerWidth();
maxMenuWidth = maxMenuWidth + menuWidth;
});
maxMenuWidth = maxMenuWidth;
console.log(maxMenuWidth);
jQuery("#TabLabels").draggable({
axis: "x",
cursor: "move",
drag: function( event, ui ) {
ui.position.left = Math.min( 0, ui.position.left );
ui.position.left = Math.max( maxMenuWidth, ui.position.left );
}
});
超文本标记语言
<div id="TabLabels" class="ui-draggable">
<span class="tabName">Tab 1</span>
<span class="tabName">Tab 2</span>
<span class="tabName">Tab 3</span>
<span class="tabName">Tab 4</span>
</div>
我可以从以下行限制右拖动：
ui.position.left = Math.min( 0, ui.position.left );
但下一行，
ui.position.left = Math.max( maxMenuWidth, ui.position.left …我的问题是如何在jquery中修复这个奇怪的故障.
当我移动其中一个盒子时,它使所有其他盒子向下射击,我不知道为什么会发生这种情况.有谁知道什么导致这个问题？
这个小提琴上有我的所有代码
js:
$(document).ready(function(){
$(function(){
$('#container').sortable({
connectWith: "#container",
cursor: "move"
}).disableSelection();
});
});
HTML
<div id="container">
<div class="container-item">Item 1</div>
<div class="container-item">Item 2</div>
<div class="container-item">Item 3</div>
</div>
CSS
lists {
height: 200px;
width: 300px;
border: 1px solid #000000;
}
#container {
background: lightgrey;
width:500px;
height: 50px;
}
.container-item {
display: inline-block;
width: 150px;
height: 500px;
background: lightblue;
margin-right: 10px;
margin-top: 0;
position: relative;
max-top: 50px;
}
我在jquery UI中使用draggable,我想知道UI参数有什么,因为我想知道调用stop()回调函数的句柄位置.
然后我想设置一个值来将draggable移动到特定位置.知道了,我该如何设置值(如滑块).http://jqueryui.com/demos/slider/#option-value
谢谢,
编辑：总体问题：对于布局复杂的页面，使用顶部/左侧动画拖动速度很慢。
我正在使用大量 CSS 的页面上实现拖放功能。当我去测试它时，“克隆” dom 对象的拖动非常缓慢，所以我开始弄清楚为什么会这样。我知道它与布局有关，所以经过几个小时的挖掘，我发现这是浏览器对克隆拖动对象的渲染缓慢而不是 javascript 计算。
我相信它之所以慢的原因是，因为布局非常复杂，每次拖动时顶部和左侧发生变化时，浏览器都需要更长的时间来呈现拖动对象。（这只是猜测。如果我错了，请纠正我）
我试过使用 CSS 变换和边距，但两者的渲染速度仍然很慢。我的问题是，有没有什么办法可以让拖拽效果以某种方式让浏览器在复杂的布局中更快地计算布局。
PS 我知道这是一个 CSS 问题，因为当我删除一个核心 .css 文件时，拖放很好。
可以拖动的项目的 Div。
<div class="pane pane-l pane-25">
<div class="sticky sticky-nav arrow_box">
<div id="accordion" class="s-accordion">
<h3>Choose Layout</h3>
<div>
<ul class="panel-nav panel-nav-layout">
<li><a href="" class="s-draggable"><img src="" width="45" height="45"><span>A</span></a></li>
<li><a href="" class="s-draggable"><img src="" width="45" height="45"><span>B</span></a></li>
<li><a href="" class="s-draggable"><img src="" width="45" height="45"><span>C</span></a></li>
<li><a href="" class="s-draggable"><img src="" width="45" height="45"><span>D</span></a></li>
<li><a href="" class="s-draggable"><img src="" width="45" height="45"><span>E</span></a></li>
<li><a href="" class="s-draggable"><img src="" width="45" height="45"><span>F</span></a></li>
<li><a href="" class="s-draggable"><img src="" width="45" height="45"><span>G</span></a></li> …