{"id":1152,"date":"2023-04-02T09:51:44","date_gmt":"2023-04-02T06:51:44","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1152"},"modified":"2023-04-02T09:51:47","modified_gmt":"2023-04-02T06:51:47","slug":"drag-and-drop-cards-reactjs","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/elements\/1152\/","title":{"rendered":"Drag-and-drop cards. ReactJs"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"712\" style=\"aspect-ratio: 1475 \/ 712;\" width=\"1475\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/04\/vokoscreenng-2023-04-02_08-45-26.webm\"><\/video><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;div id=&quot;container&quot;&gt;&lt;\/div&gt;\n\n&lt;script src=&quot;\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/0.14.3\/react.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/dragula\/3.6.2\/dragula.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js&quot;&gt;&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">@import url(https:\/\/fonts.googleapis.com\/css?family=Lato);\n\nhtml, body {\n  font-family: Lato, Arial, sans-serif;\n  background: url(https:\/\/images.unsplash.com\/photo-1680372669294-570f598ce2e5?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1172&amp;q=80);\n}\n\nh3 {\n  font-size: 18px;\n}\n\np {\n  font-size: 16px;\n}\n\n#left, #right {\n  margin-top: 20px;\n  padding-top: 20px;\n  background-color : #7cafd166;\n  min-height: 400px;\n  \n  border-radius: 15px;\n}\n\n#left {\n  width: 49%;\n  float: left;\n}\n\n#right {\n  width: 49%;\n  float: right;\n}\n\n.card {\n  background-color: #fff;\n  margin: 7px;\n  border-radius: 10px;\n  \n  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);\n}\n\n.card:hover {\n  cursor: pointer;\n}\n\n.card-header {\n  display: flex;\n  height: 40px;\n  padding:  5px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.2);\n  align-items: center;\n}\n\n.card-body {\n  height: 50px;\n  padding: 5px;\n  background-color: #a8b8ed;\n  display: flex;\n  align-items: center;\n}<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">class App extends React.Component {\n  componentDidMount() {\n    let left = document.getElementById('left');\n    let right = document.getElementById('right');\n    dragula([left, right]);\n  }\n\n  render() {\n    return \/*#__PURE__*\/(\n      React.createElement(&quot;div&quot;, { className: &quot;container&quot; }, \/*#__PURE__*\/\n      React.createElement(&quot;div&quot;, { id: &quot;left&quot;, className: &quot;container&quot; }, \/*#__PURE__*\/\n      React.createElement(Card, { body: &quot;Card 3&quot; }), \/*#__PURE__*\/\n      React.createElement(Card, { body: &quot;Card 4&quot; })), \/*#__PURE__*\/\n      React.createElement(&quot;div&quot;, { id: &quot;right&quot;, className: &quot;container&quot; }, \/*#__PURE__*\/\n      React.createElement(Card, { body: &quot;Card 1&quot; }), \/*#__PURE__*\/\n      React.createElement(Card, { body: &quot;Card 2&quot; }))));\n  }}\n\n\nclass Card extends React.Component {\n  constructor(props) {\n    super(props);\n  }\n\n  render() {\n    return \/*#__PURE__*\/(\n      React.createElement(&quot;div&quot;, { className: &quot;card&quot; }, \/*#__PURE__*\/\n      React.createElement(&quot;div&quot;, { className: &quot;card-header&quot; }, \/*#__PURE__*\/\n      React.createElement(&quot;h3&quot;, null, &quot;Example Card&quot;)), \/*#__PURE__*\/\n      React.createElement(&quot;div&quot;, { className: &quot;card-body&quot; }, \/*#__PURE__*\/\n      React.createElement(&quot;p&quot;, null, this.props.body))));\n  }}\n\nReact.render( \/*#__PURE__*\/React.createElement(App, null), document.getElementById('container'));<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1154,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[64],"class_list":["post-1152","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elements","tag-reactjs"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1152"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1152\/revisions"}],"predecessor-version":[{"id":1155,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1152\/revisions\/1155"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1154"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}