千牛后台装修代码_新车电商商家店铺装修系统原理与实现

总篇65篇 2019年第39篇

一、背景

新车电商前台-商家店铺页可以非常直观的给客户展现商家的商品、活动、优惠促销、店铺地址等信息，提升客户体验，抓住客户的眼球，增加客户的认可度，同时留资、IM咨询和顾问咨询等功能为商家提供了大量的线索，是促进订单转化的重要途径之一。而商家店铺的后台装修系统则提供了对前台店铺页的装修功能，通过装修功能可以快速便捷的完成对店铺页面的布局和装饰，提升商家自主搭建个性化店铺页的效率，节约研发成本。本文主要围绕商家店铺装修系统的原理与实现过程进行讲解。

二、装修的核心模块和区域

店铺后台装修是由三大区域，12个模块构成，下图是系统目前支持的的模块，其中首页开屏只在M端显示。

装修三大区域分别为：

1、 模块区是显示当前商家支持的系统模块。

2、 预览区动态显示各个模块内容，实现所看即所得，方便商家理解和使用。

3、 编辑热区可以修改各个模块的属性，比如预约抢购的商品选择、轮播图的图片上传和自定义图片 局部跳转URL的编辑等等。

三、装修页面的实现

模块区使用拖拽方式的进行操作，基本原理是监控鼠标移动事件，在移动到指定区域时，使用before()方法添加空白提示层，同时需要监控鼠标释放动作，释放时追加相应楼层，简单来说就是拿起模块→移动模块→放下模块，可以简单的看下示例demo。

1、拖拽效果图

2、实现原理

(1) 定义相关变量，获取数据

$(".model").on('mousedown', function (ev) {

// 定义变量，获取拖拽时的数据

var that = $(this);

// 处理浏览器兼容

var ev = ev || event;

// 获取当前拖拽模块的偏移值，就是左边界和上边界的像素值

var offset = that.offset();

var ox = offset.left, oy = offset.top;

// 获取当前拖拽元素的一个副本，并且设置下位置属性

// 目的就是生成一个一样的模块放在鼠标下面，看起来像拽起来一样

var cloneModel = that.clone();

cloneModel.css({ 'position':'absolute', 'zIndex':'999', 'left':ox, 'top':oy});

// 拖拽时鼠标偏移宽度和高度

var dx = ev.clientX - offset.left, dy = ev.clientY - offset.top;

// 这块是获取目标区域的边界值，目的是用于判断拖拽的模块是否到达目标区域