I am struggling to implement a drag and drop feature resembling a shopping cart. Unfortunately, the content within the box is concealing the div I want to drag when moving out of the box. Is there a method to display only the content on the left side?
Check out the current demo:
The jQuery custom scrollbar by malihu can be found at:
Upon inspecting the JavaScript file, I realized that the code causing this issue resides in it. The specific line responsible for the change can be located here: :
Potential solution: Perhaps generating a "clone" on-click could allow the dragged item to escape the box. Alternatively, restricting the visible area to just the left side may require modifying the JavaScript.
Your insights on this matter would be greatly valued.
The snippet below showcases my code (note that the target div is named "content2")
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<style>
#fileEm {
visibility: hidden;
width: 0;
height: 0;
}
/* Styles omitted for brevity */
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="scroll/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- Additional scripts -->
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<table width="777" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<div class="rightUpload">
<div class="catBox" id="name">
<div class="spacer" id="name"></div>
<div class="catItems" id="name">
<!-- Category items here -->
</div>
</div>
<div class="catHolder">
<div id="content_1" class="content2">
<!-- Categories shown here -->
</div>
</div>
</div>
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</form>
</body>
</html>