此代码适用于Firefox,Internet Explorer,而不适用于Safari/Chrome:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script>
function newDiv() {
var div = $('<div id="divNew" style="width: 50px; height: 50px; border: solid 1px; background: Red"></div>');
$('#divParent').append(div);
div.draggable(
{
containment: 'parent'
});
}
</script>
</head>
<body>
<a href="javascript:;" onclick="newDiv()">new div</a>
<div id="divParent" style="width: 500px; height: 500px; border: solid 1px;"></div>
</body>
在Safari/Chrome中,divNew只能垂直移动.jQuery的这个功能目前是不兼容的吗？我使用1.5.2稳定版本.可以在这里找到jQuery 1.5.2
我搜索了几天没有真正的结果,也许有人可以帮助我.
我的页面上有一个div(可以包含图像,文本区域,其他),它可拖动和可调整大小(感谢jQuery UI),我想让它"可旋转",在一个角落拖动一个句柄并使用css变换(-wekbit-transform,moz-transform)旋转它
可能吗 ？用jQuery或其他Javascript？
其实我不关心与IE的兼容性.
在此先感谢,问候
使用jQuery UI对话框.
效果很好,但是目前,当我拖动一个对话框时,它不会移出屏幕(整个对话框总是在视口中).
有没有办法设置对话框,以便我可以将其部分拖离屏幕？
<div
cdkDropList
#girlList="cdkDropList"
[cdkDropListData]="girls"
[cdkDropListConnectedTo]="[convaList]"
class="example-list"
(cdkDropListDropped)="drop($event)"><div class="card color-challenging mb-2" *ngFor="let girls_data of girls" cdkDrag>
<div class="card-body p-2 justify-content-between align-items-center d-flex">
<span class="reading-grade font-weight-bold">{{girls_data.id}}</span>
<div class="student-grade flex flex-grow-1">
<p class="justify-content-between align-items-center d-flex">
<span class="student-name">{{girls_data.firstName}}{{girls_data.lastName}}</span>
<span>{{girls_data.gender}}</span>
</p>
<p class="justify-content-between align-items-center d-flex">
<span>{{girls_data.currentAcademicYear}}</span>
<span><i class="fa fa-ban" aria-hidden="true"></i> <i class="fa fa-paperclip" aria-hidden="true"></i></span>
</p>
</div>
<span class="behavior-grade text-right font-weight-bold">{{girls_data.inGrade}}</span>
</div>
</div>
当使用 [cdkDropListData] 时，控制台上出现错误，无法绑定到“cdkDropListData”，因为它不是“div”的已知属性。
我是角度新手，所以请避免新手行为
我已经在 module.ts 中导入了 CdkDragDrop
这是组件文件。
import {Component, NgModule} from '@angular/core';
import {StudentModel} from '../model/studentRepository.model';
import {Student} from '../model/student.model';
import …在http://jqueryui.com/demos/sortable/中演示的标准行为中,当您在列表中拖动项目时,将显示占位符元素,其中项目将被删除.
但是,未指示要删除的项目的原始位置.
我想让原始位置可见,直到掉落,以便视觉反馈类似于http://jqueryui.com/demos/上描述的"半透明克隆"选项保留原始位置的方式.可拖动/#视觉反馈
有什么方法可以用sortable做到这一点吗？
谢谢!
我正在创建一个应用程序,我需要生成动态创建的控件,如文本框或标签等.
现在我该用户可以将该文本框重新定位到他想要的位置.就像我们在Visual Studio中一样.一种方法是通过使用文本框从他那里获取值来获取新位置.但我希望用户界面容易.
我们能否在winforms中拥有此类功能
我有一个带有helper: 'clone'set 的draggable元素,但是当它克隆元素时,没有任何data()或者事件在new元素中是持久的.
我已经尝试了很多方法来重新附加data(),但我似乎无法选择新元素以及同一语句中的旧元素.
例如,我可以在draggable stop()事件中选择初始元素:
$blah.draggable({
helper: 'clone',
stop: function(ev, ui) {
var oldData = $(ev.target).data('blah');
}
});
我还可以在droppable drop()事件中获取新元素:
$blah.droppable({
drop : function(ev, ui) {
var $newElement = ui.draggable;
}
});
但我无法想出办法在同一事件中获得两者.
我想做的是以某种方式传输数据,例如:
$newElement.data('blah', $oldElement.data('blah'));
或者以其他方式使数据持久化,就像你可以一样 $blah.clone(true);
我有一个可排序的视频列表和一组可拖动的视频.基本上我想确保拖入的视频不在视频的前5分钟内.由于视频长度不同,我想在下拉时测试这个 - 加起来的时间直到那时如果不是5分钟还原并显示错误.
我已经尝试连接到draggable和sortable(包括未记录的revert回调)的所有回调来进行我的测试但是无论我尝试什么,dom总是被改变(并且可以排序调用它的更新回调)......
有没有人有什么建议？
我正在使用"draggable"属性,并发现并非所有浏览器在拖动时都以相同的方式呈现元素.具体而言,背景颜色有时取自父元素(例如Chromium 33),有时使用白色(例如Firefox 28).
<div style="background-color: #79a; padding: 4px;">
<div style="border-radius: 12px; padding: 12px; background-color: #ead;" draggable='true' ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
<p>Some content here that should have clean rounded corners while being dragged</p>
</div>
</div>见上文http://jsfiddle.net/pZv35/3/.
有没有办法(最好使用CSS)来缓解这个问题？
我在React应用程序中使用Material-UI，并且在单击按钮后，它会出现在多个表单元素上。Dialog
我还设置了该对话框以允许使用react-draggable拖动它。
当对话框显示时，其后面的任何表单元素都无法被访问。我意识到阻止与对话框背后的元素的交互直观上是有意义的。
但是，我试图弄清楚如何显示对话框，同时仍然能够编辑其后面的表单元素。
代码示例在这里：
有谁知道是否可以显示 MaterialUI 对话框，并且仍然能够与对话框后面的表单元素进行交互（即，当对话框被拖走时）？