如何在模态内使用可拖动？
[英]how to use draggable within modal?
问题描述
我正在尝试在模式中使用draggable（）。 它在模态之外完美地工作，但是当我在模态中使用它时不起作用。 您能告诉我问题出在哪里以及如何解决吗？
这是我的完整代码。 （我只包含了所有CSS和脚本。不知道如何分别发布它们。2017.06.14）
谢谢。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"> </script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
@CHARSET "UTF-8";
element.style {
width: 200px;
display: block;
top: 5442px;
left: 629px;
}
.design-dropdown {
position: absolute;
left: -9999px;
top: -9999px;
padding: 5px 0;
background: white;
border: 1px solid #D7D7D7;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.3);
box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.3);
z-index: 10000;
}
.design-dropdown .divider {
border-top: 1px solid #ddd;
margin: 0px;
padding: 0px;
line-height: 1;
cursor: default;
height: 0px;
}
.design-dropdown li {
position: relative;
margin: 5px;
padding: 5px;
font-size: 15px;
color: #000;
cursor: pointer;
display: block;
overflow: hidden;
}
.design-dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
.design-dropdown li:hover {
background-color: #DEF;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 1000px;
height: 850px;
margin-bottom: 220px
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
margin-right:2%;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
*{
box-sizing: border-box;
}
/* The Modal (background) */
.modal-header {
position: relative;
font-size: 16px;
padding: 16px 20px 15px;
text-align: center;
border-bottom: 1px solid #e5e5e5;
color: #00B8FF;
left: 0;
right: 0;
width: 100%;
margin: auto;
float: right;
}
/* Modal Body */
.modal-body {
width:100%;
height:90%;
padding: 40px 30px 20px 30px;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
</style>
</head>
<body>
<!-- mouse left click window -->
<div class="grid_context_menu design-dropdown" id="grid_context_menu" style="width: 200px; display: block; top: 5467px; left: 653px;">
<ul class="custom-menu">
<li id="_setting" class="_setting"><span class="txt">imagemap seeting</span></li>
</ul>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header" align="center">
<span class="close">×</span>
<h3>video setting</h3>
</div>
<div class="modal-body" id="body" >
<div id="draggable" class="ui-widget-content">
<p >Drag me around</p>
</div>
</div>
</div>
</div>
<script>
//get dropdown on mouse right-click
$(document).ready(function(){
$(document).bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
// Show contextmenu
$(".grid_context_menu").finish().toggle(100).
// In the right position (the mouse)
css({
top: event.clientY + "px",
left: event.clientX + "px"
});
$(".custom-menu li").click(function(e){
// This is the triggered action name
switch($(this).attr("class")) {
case "_setting":
$(".modal").show();
$(".grid_context_menu").hide(100);
$(".close").click(function(){
$(document).on("contextmenu dragstart selectstart",function(e){
return true;
});
$(document).bind("contextmenu");
$(".modal").hide(100); })
$(".modal").unbind("contextmenu");
$(".modal").on("contextmenu dragstart selectstart",function(e){
return false;
});
break;
case "_extend": alert("second"); break;
case "_copy": alert("third"); break;
}
});
});
});
$( function() {
$( "#draggable" ).draggable();
} );
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("_setting");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
1 个解决方案
解决方案1
0 2017-06-14 07:50:59
首先尝试初始可拖动项，然后执行您想做的事情。 现在正在工作。 试试这个代码。
https://jsfiddle.net/0orxxkvf/
$("#draggable").draggable();
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("_setting");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
如何在 svelte 中实现 Draggable Bottom Sheet Modal？
[英]How to implement Draggable Bottom Sheet Modal in svelte?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.