Đã Hủy

Javascript Drag and Drop Grid Editor

I need something similar to this: [url removed, login to view]

But using this CSS: [url removed, login to view]

So it would allow adding any number of rows in the CSS Grid Style.

But having one distinct feature, I need it to be able to load a existing html and modify it, you can use [url removed, login to view] for loading html and easy traversal/manipulation.

Another thing which I need in this is that I want it also to insert snippets of php code based on a list I specify in a text box. But that snippet would only be inserted in the final output and would not be displayed in the preview but simply would be displayed as a text description eg:

[url removed, login to view]

Detailed Requirements:

Example workflow:

1. I open the page where the javascript application is installed and I can either create a new document or load a existing one.

2. If I load a existing I will be asked for the full filesystem path so the webserver can open it directly (so I don't want uploading but working directly on the server), of course it's the user's responsibility to make sure the file is available and has permissions to access it.

3. For the sake of a example we load the file [url removed, login to view] (which is attached to this specification), if you open it you will see 4x <?php snippets, and the cssgrid layout used there. You are basically only interested in the CSS grid and will load it as 3 rows and display it so. You will notice there is no container class which is necessary for cssgrid, but in case of loading a existing file you will detect and ignore that (also not add it to the document when saved). What we have is 12 12 and 6+6 collumns grid where the first contains some html, 2 of them contain some php and one is empty so you will display it something like:

----custom php----

row ------h1------

row ------pnlEditDriver------

row ---- pnlDriver---- empty -----

----custom php---

as you can see we have 3 possible things which can happen, one thing can be a unrecognized php where we will just say "custom php", we have custom html where you can display just the html tags as text or any other way you like as long as it's condensed and shortened, you can even say "custom html" I don't care, it's just important the user can see it's something there. and lastly we have these $this->variable->Render() php commands, these will be common and need to be filtered out with a regex so you can say the name of the variable in the html output (as in the screenshot in the first description). Each of these php commands with Render should contain a X icon beside them which when clicked should remove the php from that grid column and put it into a multiline text box which will contain all unused Renders. Also if I go in and manually add variables to the text box they should be available for adding in any column the user wants by simply dragging and dropping to the correct column.

I guess the simplest way is to have a multiline text box and a dynamically generated list of html divs somwhere near it which can be dragged into place, when done so it would remove the element from the text box.

And finally a Save button which would write the template back into it's place.

A few notes, the Render can look like any of the following:




or any variation of it and you should be able to store and reproduce it when moved between fields. I would say a regex with something like $\w->\w->Render[^;]+ should do the trick.

Maybe it would be even best in the multiline text box to keep them fully listed, the complete line, so it's more easy to remember them, you can even display them so in the columns if you think it's more easy for you.

For me it's important that I can quickly draft a template and throw these Render's all over the place quickly or rearrange them quickly with simple drag and drop.

Kỹ năng: Javascript, PHP, Thiết kế trang web

Xem thêm: php drag drop grid javascript, drag drop grid javascript, create drag drop editor javascript php, what is specification document, what is requirements specification, what is a specification document, using regex in c, user specification requirements, user specification document, user requirements specification document example, the container store, template specification document, template container, specification of requirements template, requirements and specification, regex is, regex in c, regex example, php code editor, notice icon template, it specification document template, icon template html, html text editor, go javascript, final specification

Về Bên Thuê:
( 91 nhận xét ) Cairo, Egypt

Mã Dự Án: #1748171

3 freelancer đang chào giá trung bình $850 cho công việc này


Hi, I can do this task, but seems the budget is too low, do you considering add budget?

$1250 USD trong 15 ngày
(183 Đánh Giá)

Hi, I'm interested.

$1000 USD trong 10 ngày
(20 Đánh Giá)

Hi, I'll Give you exact solution that you have required ..

$299 USD trong 5 ngày
(12 Đánh Giá)