如何在模态内使用可拖动？

Question

I'm trying to use draggable() within modal. 我正在尝试在模式中使用draggable（）。 it works perfectly outside of modal but doesn't work when I use it in modal. 它在模态之外完美地工作，但是当我在模态中使用它时不起作用。 Would you tell me what is the problem and how to fix this? 您能告诉我问题出在哪里以及如何解决吗？

here is my full code. 这是我的完整代码。 (I just included all CSS and script. Didn't know how to post them separately. 2017.06.14) （我只包含了所有CSS和脚本。不知道如何分别发布它们。2017.06.14）

Thank you. 谢谢。

<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

First try initial draggable item then do what you want to do. 首先尝试初始可拖动项，然后执行您想做的事情。 it s working now. 现在正在工作。 Try this code. 试试这个代码。

https://jsfiddle.net/0orxxkvf/ 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";
}
}

如何在模态内使用可拖动？

问题描述

1 个解决方案

解决方案1
0 2017-06-14 07:50:59

如何在模态内使用可拖动？

问题描述

1 个解决方案

解决方案1 0 2017-06-14 07:50:59

解决方案1
0 2017-06-14 07:50:59