Question

我正在尝试在模态中使用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">&times;</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>

Answer 1

首先尝试初始可拖动项目然后执行您想要执行的操作。它现在正在运作。试试这个代码。

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";
}
}

如何在模态中使用draggable？

1 个答案: