- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在研究拖放功能,它运行良好,但是当我放置元素时,它没有在我释放它的同一位置释放,我知道我错过了一些东西,在这里我添加了我的所有代码,可以任何人请帮助我,在这里我添加了我的所有代码,只需一点点帮助即可使其正常工作,谢谢
<script>
$(".draggable_image").draggable({
helper: 'clone',
});
$(".droppable").droppable({
accept: ".draggable_image",
drag: function(){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
},
drop: function (event, ui) {
if (!ui.draggable.hasClass("dropped")) {
var uniqueId = new Date().getTime();
$(".center-div").append($(ui.draggable).clone().addClass("dropped").attr('id',uniqueId).draggable());
$(".dropped img").resizable({ghost: true});
ui.draggable.draggable('enable');
}
}
});
</script>
<style>
.center-div {
width: 80%;
height: 80%;
background: grey;
position: absolute;
top:240px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.line{
height: 47px;
border-bottom: 1px solid black;
position: absolute;
}
.line-complete:hover {
//border: 1px solid white !important;
//background: white !important;
//padding: 0px;
//font-size: 1.2em;
cursor: pointer;
}
.line-circle {
width: 15px;
height: 15px;
border-radius: 50%;
font-size: 50px;
color: #fff;
line-height: 5px;
text-align: center;
background: grey; //red
margin-left: -3px !important;
margin-top: -5px !important;
z-index: 9999;
}
.draggable { padding: 0.5em; float: left; margin: 10px 10px 10px; }
.draggeble_exist { padding: 0.5em; float: left; margin: 10px 10px 10px; }
.button {
font-size: 6px !important;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="floorplan_images">
<img class="draggable_image" src="http://hfpbuilder-dev.serverdatahost.com/images/vessel_drum.png" width="50" height="50">
</div>
</div>
</div>
</div>
<div class="center-div ui-widget-header droppable">
</div>
最佳答案
您将需要使用.position()
在将其附加到 <div>
后设置其位置.
例如:
$(function() {
$(".draggable_image").draggable({
helper: 'clone',
zIndex: 1000
});
$(".droppable").droppable({
accept: ".draggable_image",
drag: function() {
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
},
drop: function(event, ui) {
var item = ui.draggable;
if (!item.hasClass("dropped")) {
var uniqueId = new Date().getTime();
var newItem = item.clone();
newItem.addClass("dropped");
newItem.attr("id", uniqueId);
newItem.appendTo($(this))
.draggable({
handle: $(this).not(".ui-resizable-handle"),
containment: $(".droppable")
});
newItem.position({ of: event
});
newItem.resizable({
ghost: true
});
} else {
return true;
}
}
});
});
.center-div {
width: 80%;
height: 80%;
background: grey;
position: absolute;
top: 240px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.line {
height: 47px;
border-bottom: 1px solid black;
position: absolute;
}
.line-complete:hover {
//border: 1px solid white !important;
//background: white !important;
//padding: 0px;
//font-size: 1.2em;
cursor: pointer;
}
.line-circle {
width: 15px;
height: 15px;
border-radius: 50%;
font-size: 50px;
color: #fff;
line-height: 5px;
text-align: center;
background: grey; //red
margin-left: -3px !important;
margin-top: -5px !important;
z-index: 9999;
}
.draggable {
padding: 0.5em;
float: left;
margin: 10px 10px 10px;
}
.draggeble_exist {
padding: 0.5em;
float: left;
margin: 10px 10px 10px;
}
.button {
font-size: 6px !important;
}
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="floorplan_images">
<img class="draggable_image" src="http://hfpbuilder-dev.serverdatahost.com/images/vessel_drum.png" width="50" height="50">
</div>
</div>
</div>
</div>
<div class="center-div ui-widget-header droppable">
</div>
希望有帮助!
关于jquery - 我们怎样才能将元素放置在可放置 div 中释放项目的确切位置元素上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49870838/
我有一个附加了 View Controller 的 AVAudioPlayer 实例。 @property (nonatomic, retain) AVAudioPlayer *previewAudi
我是java初学者。假设我声明了一个 Account 类型的变量 Account _account = new Account("Thomas"); 然后在其他地方我做了这样的事情: _account
我在我的应用程序中使用了 3 个 UIViewController,现在我想知道当我从另一个应用程序切换到另一个 UIViewController 时释放它们是否是一个好主意。显然,这将是隐藏的,当它
我分配了一个直接缓冲区: ByteBuffer directBuffer = ByteBuffer.allocateDirect(1024); 我读过: Deallocating Direct Buf
场景。我有一个图表,我可以使用右键单击来执行平移。这非常有效。然后我完美地添加了右键菜单。 问题。现在,即使在拖动操作完成后释放鼠标,也会显示右键菜单。 有没有办法在 Java Swing 或 Jav
我使用此代码获取 ABPerson 的姓氏 CFStringRef lastNameRef = ABRecordCopyValue((ABRecordRef)personRecordRef, kABP
目前,我们在基于 C 的嵌入式应用程序中使用 malloc/free Linux 命令进行内存分配/取消分配。我听说这会导致内存碎片,因为内存分配/取消分配会导致堆大小增加/减少,从而导致性能下降。其
当我尝试释放缓冲区时遇到问题。每次我尝试将缓冲区传递给释放方法时,都会发生段错误。 Valgrind 确认段错误位于 BufferDeallocate 方法中。 ==30960== Memcheck,
我想知道何时按下或释放修改后的键(Ctrl 或 Shift)。 基本上,用户可以在按下修改键的情况下执行多次击键,而我不想在它被释放之前执行一个操作(想想 Emacs 和 Ctrl + X + S).
我编写了一个相当大的网络应用程序。它运行良好一段时间,然后慢慢开始运行缓慢,因为 DOM 节点开始爬升到 80,000 - 100,000 左右。 所以我一直在 Chrome 开发工具控制台 (DCT
我知道在像 c 这样的语言中,我需要在分配内存后释放它。 (我来自 Java),对此我有几个问题: 当我在做的时候: int array[30]; (即创建一个大小为 30 个整数的数组)与
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: How to release pointer from boost::shared_ptr? Detach
我有一个可以从多个后台线程访问的类,可能同时访问。我无法复制该类,因为重新创建它的内容(处理或内存方面)可能很昂贵。 也有可能在后台处理仍在继续并访问该属性时替换了此类的属性。 目前我有定期的保留/释
这个问题是对: 的扩展链接-1:Creating an image out of the ios surface and saving it Link-2:Taking Screenshots fro
我有一个实例变量 NSMutableArray* searchResults。 首先,我初始化它: self.searchResults = [[NSMutableArray alloc] init]
如果我在堆上声明一些东西,比如 char *a=new char[1000] 并且主程序停止,如果没有 delete[]<,那么分配的内存会发生什么 调用?它保留在堆上还是自动释放? 最佳答案 就C+
在开发相机应用时,我遇到了一个异常,该异常仅在我切换到其他应用时发生(onPause() 用于我的应用)。 01-15 17:22:15.017: E/AndroidRuntime(14336): F
使用 JDK 1.8 编译时出现 maven 编译器错误 无法执行目标 org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (de
将 BufferedImage 保存到磁盘(以释放内存)的最快方法是什么? 我的 Java 应用程序处理大量图像(每约 300 毫秒将图像加载到内存中)。大多数这些图像都会立即被丢弃 (gc),但每隔
使用 JDK 1.8 编译时出现 maven 编译器错误 未能在项目 DUMMY 上执行目标 org.apache.maven.plugins:maven-compiler-plugin:3.8.1:
我是一名优秀的程序员,十分优秀!