Of Stack

jQuery EasyUI Draggable Drag Component

  • 2021-07-24 09:58:19
  • OfStack

As mentioned above, jQuery EasyUI plug-ins refer to 1. There are two commonly used ways (excluding easyload loading method), so the Draggable components to be summarized in this article are also loaded in two ways:

(1) Use class loading mode: 


<div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;">
 Content section 
</div>

(2), JS load call

$('#box').draggable();

As mentioned above, using class attribute is not conducive to expanding other attributes of components, so we use JS call method, and the following articles also use JS call method.

This component has several properties, methods, and triggering events, which are not listed here, but are all included in the code example and annotated.
Example: 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Easy UI</title> 
<meta charset="UTF-8" /> 
<script type="text/javascript" src="easyui/jquery.min.js"></script> 
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script> 
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" rel="external nofollow" /> 
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" /> 
<script> 
  $(function () { 
  $.fn.draggable.defaults.cursor = 'text';//***** Override the default in this way  
 
  $('#box').draggable({ 
    //revert : true,   The default value is false  Set to true Return to the starting position after dragging  
    //cursor : 'text',  Define the style of pointer when dragging  
    //handle : '#pox',  Handle at start of drag , That is, click where you can drag, and the parameter is 1 A JQ Selector  
    //disabled : true,  Set to true At the time of , Prohibit dragging  
    //edge : 0,  
    //axis : 'v',     Don't write: Drag arbitrarily   Value is v : Drag vertically    Value is h Horizontal drag  
    //proxy : 'clone',  When using 'clone' Clone when you are 1 Alternate element drag, if you specify 1 Function, you can customize the substitute element.  
    deltaX : 50,// The dragged element corresponds to the current cursor position X 
    deltaY : 50,// The dragged element corresponds to the current cursor position Y 
    proxy : function (source) { 
      var p = $('<div style="width:400px;height:200px;border:1px dashed #ccc">'); 
      p.html($(source).html()).appendTo('body'); 
      return p; 
    } 
    /** 
     Triggerable events:  
     
    onBeforeDrag : function (e) { 
      alert(' Triggered before dragging! '); 
    }, 
    onBeforeDrag : function (e) { 
      //return false; 
    }, 
    onStartDrag : function (e) { 
      alert(' Drag to trigger! '); 
      console.log($('#box').draggable('proxy')); 
    }, 
    onDrag : function (e) { 
      //alert(' Drag process triggers! '); 
    }, 
    onStopDrag : function (e) { 
      alert(' Triggered after dragging! '); 
    } 
    */ 
     
     
  }); 
   
  //$('#box').draggable('disable');// Prohibit dragging  
   
  //$('#box').draggable('enable');// You can drag  
 
  //alert($('#box').draggable('options'));  // Returns object properties  
   
}); 
 
</script> 
</head> 
<body> 
  <div id="box" style="width:400px;height:200px;background:orange;"> 
    <span id="pox"> Content section </span> 
  </div> 
</body> 
</html>

Click to download source code: jQuery EasyUI Draggable Drag Component

Related articles: