我正在尝试使用 jQuery UI 的可拖动功能来扩展元素捕捉的区域。截至目前，我可以使用以下基本代码让元素捕捉到另一个元素：
$('.drag').draggable({
containment: 'parent',
snap: true
});
我遇到的问题是，一旦将一个元素拖离另一个元素，我就会失去捕捉功能。有没有办法延长确定捕捉位置的线？
例如，假设我们有 3 个元素，我想将所有三个元素对齐在同一垂直轴上。该轴将始终位于任何元素的左侧并随它们一起移动。无论元素 #2 或 #3 的垂直位置如何，我都可以捕捉到元素 #1 的垂直轴吗？
[Element #1] | |
| | |
| | |
|<-- Snap to here regardless of "y" location
| | |
| | |
| [Element #2] |
| | |
| |<-- Or to here |
| | [Element #3]
| | |
| | |<-- Or to here
我尝试向每个元素添加顶部和底部边距以延长线条，但由于添加了边距，我无法在父容器内垂直移动元素。
这是一个小提琴，可以更好地说明我想要完成的任务。http://jsfiddle.net/3KNSn/
谢谢你！
我对 Javascript 中的类很陌生，我已经被困了几天试图理解为什么我的属性在我的所有方法中都变得未定义......
我试图复制这一成一类，但因为我的属性未定义的每次调用一个方法是不成功的。
我在 stackoverflow 上找不到类似的问题，但如果有的话请联系我，因为我可能没有搜索正确的问题。
<div class="row" style="height: 800px;">
<div class="col" id="container">
<div class="card" style="width: 300px; border-top: solid 20px black;" id="dragcard">
<div class="card-body">
<p>Text</p>
</div>
</div>
</div>
</div>
class DragEvents {
dragCard = document.querySelector("#dragcard");
container = document.querySelector("#container");
currentX = 0;
currentY = 0;
initialX;
initialY;
constructor() {
this.container.addEventListener("mousedown", this.dragStart, false);
this.container.addEventListener("mouseup", this.dragEnd, false);
this.container.addEventListener("mousemove", this.drag, false);
console.log(this.currentX);//works, but I need this to work in my methods.
}
drag() {
console.log("Drag");//fires
console.log(this.currentX);//undefined
console.log(this.currentY);//undefined
console.log(this.initialX);//undefined
console.log(this.initialY);//undefined
}
dragStart() …我正在使用 react-beautiful-dnd
找不到任何更改可拖动点击区域的解决方案。当我在自定义区域（而不是整个 Draggable 元素）中单击时，我需要拖动项目。
例如， Draggable 元素具有图标和文本。当我单击该元素的任何位置时，默认行为允许我拖动项目。
我只需要点击拖动元素的图标。 如何指定拖动元素的点击区域？
文档中的拖动示例（例如此示例）速度非常快，并且非常准确地映射到我的手指位置。我尝试一对一复制示例，但与我的手指位置相比有明显的滞后。
这是一个代码沙箱示例，在真实设备上测试时有明显的滞后。
信息：
"react": "17.0.2",
"react-dom": "17.0.2",
"react-scripts": "4.0.0",
"react-spring": "9.1.2",
"react-use-gesture": "9.1.3"
function PullRelease() {
const [{ x }, api] = useSpring(() => ({ x: 0 }));
const bind = useDrag(({ movement: [mx], down }) =>
api.start({ x: down ? mx : 0 })
);
return (
<animated.div {...bind()} style={{ padding: 40, background: "gold", x }}>
Hello World
</animated.div>
);
}
是否可以使用jQuery的Draggable与重叠的PNG图像(不是作为背景图像,因为它需要是可打印的)？我已经尝试过CSS样式"pointer-events:none",但这在IE中不起作用.
<div id="overlap">
<img src="overlapping.png" />
</div>
<div id="draggable">
<img src="photoToDrag.jpg" />
</div>
我有一系列可拖动的图像和一些可放置的文件夹。我在网上四处张望，找不到创建效果的方法中的任何插件/代码，当将可拖动对象拖放到可放置对象上时，它会向下缩放到可放置区域并逐渐消失。
基本上，这类似于将图标拖到OSX中的文件夹中时的情况。我正在尝试为用户提供图像已添加到文件夹的视觉反馈。
我应该补充一点，就是我不想从屏幕上删除/移动可拖动对象。我正在使用“克隆”来提供拖动正在进行中的视觉反馈。
有什么建议/代码/想法吗？
更新
在jquery中查看clone（）时，工作更多。我想出了以下几点，但是克隆的位置似乎是随机的。理想情况下，我希望在执行动画时将克隆放置在可放置对象的上方。
$('#photoscontainer').append($(r.photos[i].thumbnailhtml).draggable({
helper:"clone",
stop: function(event,ui){
clone = ui.helper.clone();
$(this).append(clone.addClass('inside-drop-zone').draggable({
containment: '.drop-zone'
}));
clone.animate({
opacity: 0,
width: "0",
height: "0"
});
}
})
);
那么如何限制droppable只包含完全可拖动？
看看这个例子.. http://jsfiddle.net/jWNkh/1/ ..尝试将draggable拖到droppable,你会看到即使draggable只有一半,droppable也会接受.
如果可拖动只有一半,如何让它不接受？如果draggable完全在droppable中,如何让它接受？
你可以在jsfiddle看到,但我的JS代码是
$('#drag').draggable({ revert: "invalid"});
$('#drop').droppable();?
我按照这里的教程:http://www.tutorialspoint.com/android/android_drag_and_drop.htm 我想在屏幕上绘制一个可拖动的图像.我在我的xml文件中添加了一个FrameLayout,并在其中添加了图像.问题是DragEvent.ACTION_DROP永远不会被调用.我确保在我的容器framelayout上实现onDrag并返回true,但它仍然没有被调用.
//MainActivity.java
public class MainActivity extends Activity {
ImageView ima;
private static final String IMAGEVIEW_TAG = "Android Logo";
private android.widget.FrameLayout.LayoutParams layoutParams;
String msg;
int x_cord = 0;
int y_cord = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
FrameLayout container = (FrameLayout) findViewById(R.id.container);
container.setOnDragListener(new OnDragListener() {
@Override
public boolean onDrag(View arg0, DragEvent arg1) {
return true;
}
});
ima = (ImageView) findViewById(R.id.iv_logo);
ima.bringToFront();
ima.setTag(IMAGEVIEW_TAG);
ima.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
ClipData.Item item …我已经设置了一个简单的拖放界面来实现克隆功能.我遇到的问题是,当元素被拖动到主画布然后掉落时,它会突然向右移动,而不是准确地拖到我拖动它的位置.
这是javascript:
$(function() {
var x = null;
$("#draggable").draggable({
helper: 'clone',
cursor: 'move',
snap: '.snap-target'
});
$("#canvas").droppable({
drop: function(e, ui) {
if ($(ui.draggable)[0].id != "") {
x = ui.helper.clone();
ui.helper.remove();
x.draggable({
helper: 'original',
containment: '#canvas',
snap: '.snap-target'
});
x.appendTo('#canvas');
}
}
});
});
我创建了一个jsfiddle:
https://jsfiddle.net/kuyn6gmc/
如果您尝试将蓝色框拖动到主画布中然后释放鼠标,您将看到该框如何"弹出"到右侧.当您在画布中移动框时,它可以正常工作.在小提琴上,它没有在浏览器上的全宽时那么糟糕,我认为它相对于视口的总宽度.
如果有人知道为什么会这样,我会很感激:)
谢谢迈克尔
我不知道该怎么做.我使用jQuery draggable,我需要捕获网格位置:
$("#draggable .item").draggable({
containment: "#dragablle",
snap: '.gridlines',
stop: function(event, ui) {
console.log(ui)
}
});
从停止事件看对象接收器:
Object { top=178, left=950}
我需要将top和left值转换为百分比,因此我可以将.item元素应用为内联样式.父"#draggable"宽度和高度将是动态的,这就是我需要百分比而不是像素的原因.因此,当调整屏幕大小时,所有内容将保持在父元素内相同(位置)