标签: draggable
可拖动+可排序和可滚动的Div
我有一个容器,其中包含可拖动项目列表和带有可排序项目列表的容器.可拖动和可排序列表已连接,允许用户将可拖动的克隆拖动到排序列表.
可拖动项目显示在垂直列表中,但可排序项目显示在水平列表中,通过向左浮动来实现.可排序项的容器将其溢出设置为auto,如果内容溢出,则会生成水平滚动条.两个容器紧挨着彼此出现,左侧是可拖动的,右侧是可排序的.
我遇到的问题是当可排序项目的容器向右滚动时,从draggables容器中拖动会立即触发sortables的事件.看起来好像sortables容器的内容被移动到draggables的容器后面.
这是我的代码:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>Sortables in scrollable divs</title>
<script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$("#sortable").sortable({
start: function(event, ui) {
if (ui.helper !== null) console.log("sortable \"" + ui.helper.text() + "\" drag start");
},
stop: function(event, ui) {
if (ui.helper !== null) console.log("sortable \"" + ui.helper.text() + "\" drag stopped");
if (ui.item !== null) console.log("sortable item \"" + ui.item.text() + "\" drag stopped");
}
});
$("#sortable").sortable("disable");
$("#draggable li").draggable({
connectToSortable: …推荐指数
解决办法
查看次数
可移动的窗口与pyqt4
只是一个简单的问题:我正在使用pyqt4来渲染一个简单的窗口.这是代码,我发布了整个事情,因此更容易解释.
from PyQt4 import QtGui, QtCore, Qt
import time
import math
class FenixGui(QtGui.QWidget):
def __init__(self):
super(FenixGui, self).__init__()
# setting layout type
hboxlayout = QtGui.QHBoxLayout(self)
self.setLayout(hboxlayout)
# hiding title bar
self.setWindowFlags(QtCore.Qt.FramelessWindowHint)
# setting window size and position
self.setGeometry(200, 200, 862, 560)
self.setAttribute(Qt.Qt.WA_TranslucentBackground)
self.setAutoFillBackground(False)
# creating background window label
backgroundpixmap = QtGui.QPixmap("fenixbackground.png")
self.background = QtGui.QLabel(self)
self.background.setPixmap(backgroundpixmap)
self.background.setGeometry(0, 0, 862, 560)
# fenix logo
logopixmap = QtGui.QPixmap("fenixlogo.png")
self.logo = QtGui.QLabel(self)
self.logo.setPixmap(logopixmap)
self.logo.setGeometry(100, 100, 400, 150)
def main():
app = QtGui.QApplication([])
exm = FenixGui() …推荐指数
解决办法
查看次数
jQuery可以使用droppable进行排序
我的小提琴:http://jsfiddle.net/Yc9WY/42/
你在这里看到的是两组,每组有3个可放置的容器.您可以将事件从组1移动到组2,并移动到任何插槽.这很好用.
一旦一个组已满,我想让用户能够通过上下移动事件来对该组进行排序.如果他们选择,他们仍然可以将事件移出组.
您将看到我注释掉的代码,我开始集成可排序的库,但我的行为很奇怪.
注意:我无法单独替换我的draggable/dropable.我需要明确定义的可放置区域(每组3个),以便事件可以存在于组1的插槽1和3中.
这是我的代码
$(document).ready(function() {
// $(".sort").sortable({
// revert: true
// });
$(".drag").draggable({
//connectToSortable: ".sort",
revert: true
//helper: clone
});
$(".sort").droppable({
drop: function(event, ui) {
if (!($(this).children(".drag").size() == 1)) {
$(this).append(ui.draggable);
ui.draggable.css({
left: 0,
top: 0
});
}
}
});
});
<div>Group 1:
<ul class="parent">
<li class="sort"><a href="" class="drag">event 1</a></li>
<li class="sort"><a href="" class="drag">event 2</a></li>
<li class="sort"></li>
</ul>
</div>
<div>
Group 2
<ul class="parent">
<li class="sort"></li>
<li class="sort"><a href="" class="drag">event 3</a></li>
<li class="sort"><a href="" …推荐指数
解决办法
查看次数
jquery droppable需要更少的重叠
我正在使用jquery设置一个可拖动的界面来执行拖放操作.我有一个高大的物体(400px x 50px),我想放入一个小锚(100px x 100px).似乎为了触发"drop"和"over"事件,至少有一半的拖动容器必须在droppable容器的边界内,在这种情况下不会发生,因为拖动容器要大得多.有没有办法减少这种限制,以便这些事件会被激发？
推荐指数
解决办法
查看次数
Jquery UI Draggable对齐边缘
我正在开发一个用户可以自定义自己的仪表板页面的项目.这意味着他们可以将组件拖到页面上并根据需要定位它们.
为了获得一个漂亮的布局页面,我希望组件相互捕捉.此时我正在使用snap:true属性,它将组件放在彼此旁边.但是,我想在它们捕捉之后在组件之间留出一些空间.因此,它必须捕捉到另一个具有5像素间隙的组件,而不是捕捉到另一个组件的确切位置.
有没有办法做到这一点？
推荐指数
解决办法
查看次数
HTML5 Draggable ghost图像并不总是在Chrome中显示
我的笔记本电脑上有Chrome,桌面上有Chrome.它们是完全相同的版本,它们似乎具有相同的设置.但是当我拖着我的笔记本电脑时,会出现鬼影.当我在桌面上拖动时,鬼图像不会出现.
例如,使用此演示,当我在笔记本电脑上拖动图像时,我看到徽标的鬼影随光标移动.在我的桌面上,我没有看到它.如果它们是不同的浏览器或版本我可以理解它,但它们是相同的版本,所以谁控制是否出现鬼影像？是否有设置或可能是操作系统的差异(它们都是Windows,但一个是7,另一个是服务器)？
编辑:在相同版本的Firefox中具有相同的奇怪行为.幽灵在一台机器上不存在而在另一台机器上存在.IE鬼也没有出现.
推荐指数
解决办法
查看次数
JQuery拖动和滚动与缓动
有没有人知道任何脚本JQuery或其他拖动和滚动与缓动？
我发现各种脚本可以通过缓动平滑滚动,或者通过缓动平滑拖动.但滚动和拖动所有脚本似乎不包括缓动.这里有些例子:
Utterscroll
https://github.com/debiki/utterscroll
DragOn
http://dragon.deparadox.com/
DragScrollable
http://hitconsultants.com/dragscroll_scrollsync/scrollpane.html
http://hitconsultants.com/dragscroll_scrollsync/scrollsync.js
http://hitconsultants.com/dragscroll_scrollsync/dragscrollable.js
如果有人知道带有缓动的拖动滚动脚本,请告诉我.或者,我们可能需要将缓动集成到上面的一个脚本中,但这些脚本非常复杂.谢谢.
推荐指数
解决办法
查看次数
网格中控件周围的WPF可点击区域
我在为表单制作自定义标题栏时遇到问题.它将包含一个搜索文本框以及一些滑块,如下图所示:
现在,想象一下作为标题栏 - 所有不是控件本身的部分(由边框元素和滑块包围的文本框)都需要可以拖拽以进行拖动.
我试过这个:
<Grid MouseDown="TitleGridMouseDown">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="135"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<Slider Grid.Column="1" Margin="5 15 5 0" Width="100" MouseDown="TitleGridMouseDown"/>
<Slider Grid.Column="2" Margin="5 15 5 0"/>
<Border Grid.Column="3" CornerRadius="10" BorderThickness="1" BorderBrush="White" Width="180" Height="20" Background="White">
<TextBox Background="Transparent" BorderThickness="0" Height="20"/>
</Border>
</Grid>
但是没有用.两个滑块之间有一小部分,就像几个像素区域一样,实际上可以工作(DragMove();在事件本身中).我在WPF中没有太多经验这种类型的东西,但我觉得这个区域缩小到了控制范围.例如,如果我将border对象放入按钮并尝试将事件绑定到按钮,则不会发生任何变化.
我该怎么做呢？
推荐指数
解决办法
查看次数
QML：即使drag属性处于活动状态，也不会调用onDragStarted / finish
在下面的示例中，我希望在拖动一个矩形时调用onDragStarted/ onDragFinished。但是，仅drag.onActiveChanged（mouseArea的）和Drag.onActiveChanged（矩形的）被调用。设置为时Drag.dragType，我得到了预期的输出，Drag.Automatic但是我再也看不到矩形了。我在Mac（El Capitan）上使用Qt 5.5。
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
visible: true
width: 100
height: 200
ListModel {
id: testModel
ListElement { name: "red"; value: "#f00" }
ListElement { name: "green"; value: "#0f0" }
ListElement { name: "blue"; value: "#00f" }
}
Component {
id: rect
Rectangle {
Drag.active: mouseArea.drag.active
Drag.hotSpot.x: width / 2
Drag.hotSpot.y: height / 2
//Drag.dragType: Drag.Automatic
Drag.onActiveChanged: {
console.log("Active changed..")
}
Drag.onDragStarted: { …推荐指数
解决办法
查看次数
如何使div可拖放
我项目中剩下的一件事是使两个div同时可拖动和可放置。现在我有了可以拖放的div的工作代码，但是例如，我可以将div从目标区域拖放到用户区域，但是我似乎无法找到一种方法将这些div从用户拖放并分配给其他用户用户。
$(document).ready(function(){
$(".dragable").draggable({
cancel: "a.ui-icon",
revert: true,
helper: "clone",
cursor: "move",
revertDuration: 0
});
$('.droppable').droppable({
accept: ".dragable",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
// clone item to retain in original "list"
var $item = ui.draggable.clone();
$(this).addClass('has-drop').append($item);
}
});
});
推荐指数
解决办法
查看次数