使用jQuery 1.2.x和jQuery UI 1.5.x,可以像下面这样手动触发拖动:
jQuery("#myDiv").mousedown(function(ev) {
target = jQuery(ev.target);
if (target.hasClass("drag-me")) {
target.draggable({
helper: "clone",
start: function()
{
console.log("drag start");
},
stop: function()
{
jQuery(this).draggable("destroy");
}
}).trigger("mousedown.draggable", [ev]);
} });
它适用于以下HTML:
<div id="myDiv">
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
</div>
这是一种将拖动应用于动态更改其子项的容器内的元素的方便方法.我喜欢称之为"拖曳代表团".
然而随着jQuery 1.3.x和jQuery 1.6+的发布,上面的脚本停止了工作.使用jQuery 1.3.2和jQuery UI 1.7.1会返回错误"太多的递归".
如何手动触发拖动？有什么建议？
嗨,我正在开发一个新项目,需要使用Raphael JS和插件Raphael.Freetransform.到目前为止,该插件工作得非常好,非常顺利.但是,通过使用hideHandles()方法,它似乎也禁用任何形式的对象拖动.
这是一个错误还是一个设计选择？一旦隐藏其手柄,是否需要重新启用对元素的拖动？我试过设置.为了在不使用Freetransform插件的情况下使元素可拖动,我还需要做些什么吗？
这是我的代码:
paper = new Raphael("container", "1680", "1005");
setA = paper.set();
circle = paper.circle(50, 50, 50);
circle.attr("fill", "#f00");
circle.attr("stroke", "#000");
notif = paper.circle(50, 50, 50);
notif.attr({ "fill": "r(0.5, 0.5) #fff-#f00", "fill-opacity": 1 });
lbl = paper.text(50, 50, "Label").attr({fill: '#000000'});
setA.push(circle);
setA.push(notif);
setA.push(lbl);
setA.click(function(){
console.log('clicked');
});
setA.hover(
// over //
function (){ console.log('over'); },
// out //
function (){ console.log('out'); }
);
setA.drag(
//onmove
function(){
console.log('object moving');
},
//onstart
function(){
console.log('start drag');
},
//onend
function(){
console.log('end drag');
}
); …我想拖动一个框,我希望我的鼠标光标在我拖动矩形的同时点击一个矩形.我试过这个代码,当我试图拖动时,我收到了一堆错误.
import objectdraw.*;
import java.awt.*;
public class TouchWindow extends WindowController
{
private FilledRect a;
private boolean b;
private Location c;
private int x;
private int y;
public void begin()
{
b=false;
a=new FilledRect(0,0,50,50,canvas);
}
public void onMouseClick(Location pt)
{
if(a.contains(pt))
{
b=true;
pt=c;
}
}
public void onMouseDrag(Location pt2)
{
if(b==true)
{
x=(int)c.getX()-(int)pt2.getX();
y=(int)c.getY()-(int)pt2.getY();
a.move(x,y);
}
}
}
我已经浏览了整个互联网,但发现没有任何效果.
我希望我的图像不被选中,就像带有背景图像的div(<div style = "background-image : 'moo.png';"> </div>)
我不能使用背景图像,因为我需要一个图像映射功能.
我的代码看起来像这样:
CSS,
.filmmakers #map {
-moz-user-select : -moz-none;
-khtml-user-select : none;
-webkit-user-select : none;
-ms-user-select : none;
-o-user-select : none;
user-select : none;
}
.filmmakers #map::selection {
color : rgba(0, 0, 0, 0);
}
HTML,
<img id = "map" src = "WorldMap.png" alt = "Map" unselectable = "on" style = "left : 0px; top : 0px;" />
JavaScript的,
var map = document.getElementById('map');
makeUnselectable(map);
function makeUnselectable(node) {
if (node.nodeType == …我正在尝试使用 transform translate 拖动容器，但某些东西导致了跳跃行为，我无法弄清楚是什么原因。
更新：当元素的容器并不总是位于文档的 0,0 处时，这必须适用于元素。
HTML：
<div id=container style="position:absolute;left:50px;top:50px;width:500px;height:500px;background-color:red;">
<div id=tcontainer style="position:relative;left:50px;top:50px;width:400px;height:400px;background-color:green;">
<div id=move style="position:relative;left:20px;top:20px;height:150px;width:150px;background-color:lightgray;">
</div>
</div>
Javascript：
obj = {startPositionX:0,startPositionY:0};
$('#move').on("mousedown",function(){
var move = $(this);
obj.startPositionX=event.offsetX+$('#tcontainer').offset().left;
obj.startPositionY=event.offsetY+$('#tcontainer').offset().top;
$(document).on("mousemove",function(e){
console.log("dragging", e.pageX-obj.startPositionX, e.pageY-obj.startPositionY);
move.css('transform','translate('+(e.pageX-obj.startPositionX)+'px, '+(e.pageY-obj.startPositionY)+'px)');
});
});
$(document).on("mouseup",function(){
$(this).off("mousemove");
});
我有一个带有两个表单的 MDI 表单应用程序。第一个有一个 StringGrid，第二个有很多 Edit 控件和几个按钮。
我需要从网格中拖放到第二个表单上，并使用第一个表单中 StringGrid 中所选单元格的值更新一个 Edit。
如果我事先知道用户将在哪个控件上释放鼠标左键，这很容易做到，因为我可以设置该特定控件的 OnDragDrop 事件。但我不想为第二个窗体上的每个控件编写多个 OnDragDrop 事件。
如何拦截表单范围的消息以拦截任何控件上的删除操作？
// 我的代码调用要放置在 JPanel 上的目录中的 n 个图像
public void imageAdder(int n, String name){
BufferedImage myPic = null;
for (int i = 0; i <= n; i++){
try {
myPic = ImageIO.read(new File("Images/" + name + i + ".jpg"));
} catch (Exception e){
System.out.println("no file man cmon");
}
JLabel picLabel = new JLabel(new ImageIcon(myPic));
// picLabel.setBounds(mouseX, mouseY, 100, 50);
// picLabel.addMouseMotionListener(this);
// picLabel.addMouseListener(this);
canvas.add(picLabel);
}}
我阅读了类 DragSource 以及如何有一种方法可以拖动图像类型的东西，但我不确定这是否适用于我的代码。如果我想用鼠标自由拖动图像怎么办？
一个简单的问题。我用了4到6个小时来找到它，但没有找到。
例如，我正在构建全景查看器：<a-sky>
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<a-scene>
<a-sky src="https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg" rotation="0 -130 0"></a-sky>
</a-scene>如何通过鼠标反转旋转？（从左到右，从右到左-像这样）
我正在尝试编写一个纸牌游戏程序 - 主要是探索如何使用 Tkinter 在 GUI 中使用鼠标移动对象。我发现以下代码允许用户用鼠标在窗口中移动卡片：
from tkinter import *
window = Tk()
window.state('zoomed')
window.configure(bg = 'green4')
def drag(event):
card.place(x=event.x_root, y=event.y_root,anchor=CENTER)
card = Canvas(window, width=74, height=97, bg='blue')
card.place(x=300, y=600,anchor=CENTER)
card.bind("<B1-Motion>", drag)
window.mainloop()
但是，如果我添加另一张卡，如下所示：
another_card = Canvas(window, width=74, height=97, bg='red')
another_card.place(x=600, y=600,anchor=CENTER)
another_card.bind("<B1-Motion>", drag)
单击这张卡只会移动第一张卡。当我尝试修改拖动功能时，如下所示：
def drag(event, card):
card.place(x=event.x_root, y=event.y_root,anchor=CENTER)
和
another_card.bind("<B1-Motion>", drag(event, another_card))
我收到“参数太多”或“名称“事件”未定义”错误。由于我最终将在屏幕上显示多达 52 张卡片，因此我无法为每张卡片编写单独的拖动函数。是否可以编写可以绑定到任何对象的通用“拖动”代码？
PS 在这个例子中我刚刚使用了空白画布。不过，我有 52 张扑克牌的 gif，我希望（希望）能够在游戏本身的 GUI 中移动它们。
所以我发现了如何使用 UIPanGestureRecognizer 使按钮可拖动。但我知道如何做到这一点的唯一方法是通过中心存储和拖动按钮。这样做的问题是，如果您尝试从角落拖动按钮，按钮会立即从角落移动到中心。我正在寻找一种解决方案，它可以让我的手指在移动时保持在选定的位置上，而不会立即锁定到中心。
我目前使用的代码：
func buttonDrag(pan: UIPanGestureRecognizer) {
print("Being Dragged")
if pan.state == .began {
print("panIF")
buttonCenter = button.center // store old button center
}else {
print("panELSE")
let location = pan.location(in: view) // get pan location
button.center = location // set button to where finger is
}
}
提前致谢。