'jQuery drag-and-drop'에 해당되는 글 1건

  1. 2014.01.13 Standard jQuery drag-and-drop
반응형

Example: Standard jQuery drag-and-drop

 

출처 : http://wwwendt.de/tech/dynatree/doc/samples.html

 

jquery_dynatree-1_2_5-all.zip

 

This sample uses the standard jQuery draggable and droppable.

Skin:

This tree allows dragging.

This tree allows dropping.

Active node: -
Active node: Sub-item 2.1.1(_4)

Drag me around

Drop something here


Dynatree DEVELOPMENT, jQuery UI 1.8.24, jQuery 1.8.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
 
<title>Dynatree - Example</title>
<!--
  <script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
  <script src="../jquery/jquery.js" type="text/javascript"></script>
  <script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
-->

 
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
 
<script src="../jquery/jquery.js" type="text/javascript"></script>
 
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>

 
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
 
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>

 
<style type="text/css">
   
#draggableSample, #droppableSample {
      height
:100px;
      padding
:0.5em;
      width
:150px;
      border
:1px solid #AAAAAA;
   
}
   
#draggableSample {
      background
-color: silver;
      color
:#222222;
   
}
   
#droppableSample {
      background
-color: maroon;
      color
: white;
   
}
   
#droppableSample.drophover {
      border
: 1px solid green;
   
}
 
</style>

 
<!-- (Irrelevant source removed.) -->

<script type="text/javascript"><!--
$
(function(){
 
// --- Initialize first Dynatree -------------------------------------------
  $
("#tree").dynatree({
    initAjax
: {
      url
: "sample-data3.json"
   
},
    onLazyRead
: function(node){
     
// Mockup a slow reqeuest ...
      node
.appendAjax({
        url
: "sample-data2.json",
        debugLazyDelay
: 750 // don't do thi in production code
     
});
   
},
    onActivate
: function(node) {
      $
("#echoActive").text(node.data.title + "(" + node.data.key + ")");
   
},
    onDeactivate
: function(node) {
      $
("#echoActive").text("-");
   
},
    dnd
: {
      revert
: false, // true: slide helper back to source if drop is rejected
      onDragStart
: function(node) {
       
/** This function MUST be defined to enable dragging for the tree.
         *  Return false to cancel dragging of node.
         */

        logMsg
("tree.onDragStart(%o)", node);
       
if(node.data.isFolder){
         
return false;
       
}
       
return true;
     
},
      onDragStop
: function(node) {
        logMsg
("tree.onDragStop(%o)", node);
     
}
   
}
 
});
 
// --- Initialize second Dynatree ------------------------------------------
  $
("#tree2").dynatree({
    initAjax
: {
      url
: "sample-data3.json"
   
},
    onLazyRead
: function(node){
     
// Mockup a slow reqeuest ...
      node
.appendAjax({
        url
: "sample-data2.json",
        debugLazyDelay
: 750 // don't do thi in production code
     
});
   
},
    onActivate
: function(node) {
      $
("#echoActive2").text(node.data.title + "(" + node.data.key + ")");
   
},
    onDeactivate
: function(node) {
      $
("#echoActive2").text("-");
   
},
    onLazyRead
: function(node){
      node
.appendAjax({
        url
: "sample-data2.json"
     
});
   
},
    dnd
: {
      autoExpandMS
: 1000,
      preventVoidMoves
: true, // Prevent dropping nodes 'before self', etc.
      onDragEnter
: function(node, sourceNode) {
       
/* sourceNode may be null for non-dynatree droppables.
         * Return false to disallow dropping on node. In this case
         * onDragOver and onDragLeave are not called.
         * Return 'over', 'before, or 'after' to force a hitMode.
         * Any other return value will calc the hitMode from the cursor position.
         */

        logMsg
("tree.onDragEnter(%o, %o)", node, sourceNode);
       
// For the sake of this example deny dropping over folders
       
if(node.data.isFolder){
         
return false;
       
}
       
return true;
//                return "over";
     
},
      onDragOver
: function(node, sourceNode, hitMode) {
       
/* Return false to disallow dropping this node.*/
//         if(node.data.isFolder){
//           var dd = $.ui.ddmanager.current;
//           dd.cancel();
//           alert("folder");
//         }
        logMsg
("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
     
},
      onDrop
: function(node, sourceNode, hitMode, ui, draggable) {
       
/* This function MUST be defined to enable dropping of items on the tree.
         * sourceNode may be null, if it is a non-Dynatree droppable.
         */

        logMsg
("tree.onDrop(%o, %o)", node, sourceNode);
       
var copynode;
       
if(sourceNode) {
          copynode
= sourceNode.toDict(true, function(dict){
            dict
.title = "Copy of " + dict.title;
           
delete dict.key; // Remove key, so a new one will be created
         
});
       
}else{
          copynode
= {title: "This node was dropped here (" + ui.helper + ")."};
       
}
       
if(hitMode == "over"){
         
// Append as child node
          node
.addChild(copynode);
         
// expand the drop target
          node
.expand(true);
       
}else if(hitMode == "before"){
         
// Add before this, i.e. as child of current parent
          node
.parent.addChild(copynode, node);
       
}else if(hitMode == "after"){
         
// Add after this, i.e. as child of current parent
          node
.parent.addChild(copynode, node.getNextSibling());
       
}
     
},
      onDragLeave
: function(node, sourceNode) {
       
/** Always called if onDragEnter was called.
         */

        logMsg
("tree.onDragLeave(%o, %o)", node, sourceNode);
     
}
   
}
 
});
 
// --- Initialize simple draggable sample ----------------------------------
  $
("#draggableSample").draggable({
//      revert: "invalid", // slide back, when dropping over non-target
    revert
: function(dropped){
     
// Return `true` to let the helper slide back.
     
if(typeof dropped === "boolean"){
       
// dropped == true, when dropped over a simple, valid droppable target.
       
// false, when dropped outside a drop target.
       
return !dropped;
     
}
     
// Drop comes from another tree. Default behavior is to assume
     
// a valid drop, since we are over a drop-target.
     
// Therefore we have to make an extra check, if the target node
     
// was rejected by a Dynatree callback.
     
var helper = $.ui.ddmanager && $.ui.ddmanager.current && $.ui.ddmanager.current.helper;
     
var isRejected = helper && helper.hasClass("dynatree-drop-reject");
     
return isRejected;
     
},
    connectToDynatree
: true,
    cursorAt
: { top: -5, left:-5 },
    helper
: "clone"
 
});
 
// --- Initialize simple droppable sample ----------------------------------
  $
("#droppableSample").droppable({
    hoverClass
: "drophover",
    addClasses
: true,
//    tolerance: "pointer",
    over
: function(event, ui) {
      logMsg
("droppable.over, %o, %o", event, ui);
   
},
    drop
: function(event, ui) {
     
var source = ui.helper.data("dtSourceNode") || ui.draggable;
      $
(this).addClass("ui-state-highlight").find("p").html("Dropped " + source);
//      alert("dropped");
   
}
 
});
 
<!-- (Irrelevant source removed.) -->
});
--></script>
</head>

<body class="example">
 
<h1>Example: Standard jQuery drag-and-drop</h1>
 
<p class="description">
    This sample uses the standard jQuery draggable and droppable.
 
</p>
 
<div>
    Skin:
   
<select id="skinCombo" size="1">
     
<option value="skin">Standard ('/skin/')</option>
     
<option value="skin-vista">Vista ('/skin-vista/')</option>
   
</select>
 
</div>

 
<table>
 
<thead>
 
<tr>
   
<th>
   
<p>This tree allows dragging.</p>
   
</th>
   
<th>
   
<p>This tree allows dropping.</p>
   
</th>
 
</tr>
 
</thead>
 
<tbody>
 
<tr valign="top">
   
<td>
     
<div id="tree"> </div>
   
</td>
   
<td>
     
<div id="tree2"></div>
   
</td>
 
</tr>
 
<tr>
   
<td>
     
<div>Active node: <span id="echoActive">-</span></div>
   
</td>
   
<td>
     
<div>Active node: <span id="echoActive2">-</span></div>
   
</td>
 
</tr>
 
<tr>
   
<td>
     
<div id="draggableSample" class="ui-widget-content">
       
<p>Drag me around</p>
     
</div>
   
</td>
   
<td>
     
<div id="droppableSample" class="ui-widget-content">
       
<p>Drop something here</p>
     
</div>
   
</td>
 
</tr>
 
</tbody>
 
</table>

 
<!-- (Irrelevant source removed.) -->
</body>
</html>
Posted by 1010